/* =========================================================
app.css – HTML5, responsive, mobile-first
Struktur:
1) Tokens/Variablen
2) Reset/Normierung & Typografie
3) Utilities & Layout-Container
4) Header & Navigation (inkl. Skip-Link)
5) Hero
6) Main-Panel (Inhaltskarte)
7) Buttons
8) Footer
9) Komponenten (Services-Block, Content-Cards, Listen, Grids, Map)
10) Sonstiges (Adresse, Extern-Icon, Code, Print)
========================================================= */
/* 1) ===== Tokens / Design-Variablen ===== */
:root{
--max-w: 72rem;
/* Spacing & Radius */
--space-2xs:.25rem; --space-xs:.5rem; --space-s:.75rem; --space-m:1rem;
--space-l:1.5rem; --space-xl:2rem; --space-2xl:3rem;
--radius:.75rem;
/* Farben */
--bg:#ffffff; --ink:#111111; --muted:#666; --border:#e5e7eb;
--surface:#f3f4f6;
/* Historische Brand (blau), bleibt für Fokus/Outline */
/*--brand:#0e7afe; --brand-ink:#0a3d83;*/
/* CI aus dem Logo */
--logo-indigo:#1c1652;
--logo-gray:#6c7383;
/*--logo-gray: #7d7c7f;*/
--brand: var(--logo-indigo);
--brand-ink: var(--logo-indigo);
}
/* 2) ===== Reset/Normierung & Typografie ===== */
html{box-sizing:border-box;-webkit-text-size-adjust:100%;font-size:clamp(15px,1.1vw+12px,18px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;line-height:1.65;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif;color:var(--ink);background:var(--bg)}
/* Inline-SVGs als Icons behandeln */
svg{
display:inline-block;
max-width:none; /* nicht auf 100% aufblasen */
height:1em;
width:1em;
vertical-align:-0.125em; /* sitzt schöner neben Text */
}
strong {
color:var(--logo-indigo);
}
img,video,canvas{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
h1,h2,h3{line-height:1.25;margin:0 0 var(--space-m)}
p{margin:0 0 var(--space-m)}
.small{font-size:.9em;color:var(--muted)}
.lead{font-size:1.125em;color:var(--muted)}
.measure{max-width:65ch}
p{hyphens:auto}
code{word-break:break-word}
:target{scroll-margin-top:calc(var(--space-xl) + 56px)}
/* Überschriftfarben gem. CI
h1{color:#7D7C7F;font-weight:700}
h2{color:var(--logo-indigo);font-weight:600}
*/
h1 {
color: var(--logo-gray);
font-weight: 700;
font-size: clamp(2rem, 2.5vw + 1rem, 3rem); /* groß und markant */
}
h2 {
color: var(--logo-indigo);
font-weight: 600;
font-size: 1.5rem;
line-height: 1.3;
margin-bottom: .75rem;
}
h3 {
color: var(--muted); /* dezenter als h2 */
font-weight: 500; /* schwächer */
font-size: 1.15rem; /* klar kleiner als h2 */
line-height: 1.4;
margin-bottom: .5rem;
}
h1, h2, h3, h4, h5, h6 {
text-align: left;
}
/* ganz am Ende der app.css */
.nav a, .sidebar nav a { word-break: keep-all; hyphens: none; }
/* 3) ===== Utilities & Layout-Container ===== */
/*.wrapper{width:min(100% - 2rem,var(--max-w));margin-inline:auto}*/
.wrapper{width:min(100% - 1rem,var(--max-w)); margin-inline:auto}
.section{padding:var(--space-xl) 0}
.stack>*+*{margin-block-start:var(--space-m)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--space-m);align-items:center;justify-content:flex-start}
.grid{display:grid;gap:var(--space-l);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.card{border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-l);background:#fff}
.text-center{text-align:center}
.hide{display:none !important}
.mt-l{margin-top:var(--space-l)}
.mb-l{margin-bottom:var(--space-l)}
/* 4) ===== Header & Navigation ===== */
.site-header{
position:sticky; top:0; z-index:30;
background:#f9f9fb;
border-bottom:1px solid var(--border);
box-shadow:0 2px 4px rgba(0,0,0,.05);
}
.site-header .wrapper{padding:.75rem 1rem}
/* Skip-Link */
.skip-wrapper{
margin-left:1rem;
border-bottom:1px solid var(--border);
background-color: #fff;
}
.skip-link{
display:inline-block;
margin:.25rem 0 .5rem 1rem;
font-size:.9em;
}
/* Navbar: Burger links, Logo rechts */
.navbar{
display:grid;
grid-template-columns:2.5rem 1fr auto;
align-items:center;
gap:var(--space-m);
padding:var(--space-m) 0;
}
.navbar .nav-toggle{justify-self:start}
.navbar .brand{justify-self:end;text-decoration:none}
.navbar .brand-logo{height:60px;width:auto;display:block}
@media (max-width:480px){.navbar .brand-logo{height:60px}}
@media (max-width:360px){.navbar .brand-logo{height:50px}}
@media (min-width:768px){.navbar .brand-logo{height:48px}}
/* Toggle-Button */
.nav-toggle{
appearance:none;border:1px solid var(--border);background:#fff;
padding:.5rem .75rem;border-radius:.5rem;cursor:pointer;
display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);font:inherit;min-height:2.25rem;
}
/* Burger-Icon + Animation */
.icon-burger line{
stroke:currentColor;stroke-width:2.2;stroke-linecap:round;
transform-origin:12px 12px;transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .icon-burger .l1{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .icon-burger .l2{opacity:0}
.nav-toggle[aria-expanded="true"] .icon-burger .l3{transform:translateY(-6px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.icon-burger line{transition:none}}
/* Basis-Navi mobil */
.nav{display:none}
.nav[data-open="true"]{display:block}
.nav ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-s)}
.nav a{padding:.5rem .75rem;border-radius:.5rem}
.nav a[aria-current="page"]{background:#eef5ff;color:var(--brand-ink);font-weight:600}
/* Off-Canvas mobil */
.nav-panel{
position:fixed; left:0;
top:calc(var(--space-xl) + .5rem);
height:calc(100vh - (var(--space-xl) + .5rem));
width:min(85vw,22rem);
background:#fff;border-right:1px solid var(--border);
box-shadow:0 10px 30px rgba(0,0,0,.08);
transform:translateX(-100%); transition:transform .25s ease; z-index:25;
}
.nav-panel .nav-panel-inner{padding:var(--space-m);overflow:auto;height:100%}
.nav-panel-inner {
max-height: 80vh; /* Höhe des Menüs auf 80% des sichtbaren Viewports setzen */
overflow-y: auto; /* Vertikales Scrollen aktivieren */
}
.nav-panel[data-open="true"]{transform:translateX(0)}
.nav-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:1}
.nav-panel-title{font-weight:700}
.nav-close{appearance:none;border:1px solid var(--border);background:#fff;padding:.35rem;border-radius:.5rem;cursor:pointer;line-height:0;display:inline-flex;align-items:center;justify-content:center}
.nav-close:hover{filter:brightness(.96)}
.nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:20}
body.nav-open{overflow:hidden}
.nav-divider{height:1px;background:var(--border);margin:.5rem 0}
.nav-heading{font-size:.9em;color:var(--muted);margin-bottom:.25rem}
/* Ab Tablet: Top-Navi */
@media (min-width:768px){
.nav{display:block !important}
.nav-panel{position:static;transform:none !important;height:auto;width:auto;border:0;box-shadow:none;display:block !important}
.nav-panel .nav-panel-inner{padding:0;height:auto;overflow:visible}
.nav-panel-header,.nav-backdrop,.nav-toggle{display:none !important}
.nav ul{grid-auto-flow:column;grid-auto-columns:max-content}
}
/* Ab 900px: Bereiche oben ausblenden */
/*@media (min-width:900px){.nav-divider,.nav-heading,.nav-bereich{display:none !important}}*/
/* 5) ===== Hero ===== */
.hero{padding:var(--space-2xl) 0}
.hero h1{font-size:clamp(2rem,2.5vw + 1rem,3rem);margin-bottom:var(--space-m)}
.hero p{color:var(--muted)}
.hero .wrapper{padding-inline:var(--space-m)}
/* 6) ===== Main-Panel (Inhaltskarte) ===== */
.main{
background:linear-gradient(to bottom,#fbfbfb,#f3f3f3);
border-radius:var(--radius);
box-shadow:0 3px 8px rgba(0,0,0,.06);
padding:var(--space-m);
margin:var(--space-m) 0 .5rem;
text-align:justify; hyphens:auto; line-height:1.7;
}
@media (min-width:600px){
.main{padding:var(--space-l);margin:var(--space-l) 0}
}
/* 7) ===== Buttons ===== */
button,.button {
display:inline-block; border:1px solid transparent; border-radius:.6rem;
padding:.6rem 1rem; cursor:pointer; text-decoration:none;
box-shadow:0 2px 4px rgba(0,0,0,0.1); transition:box-shadow .2s ease, transform .2s ease;
}
button:hover,.button:hover{box-shadow:0 4px 6px rgba(0,0,0,0.15);transform:translateY(-1px);text-decoration:none}
/* Primär */
.button{background:#1a1464;color:#fff;border-color:#1a1464}
.button:hover{background:#120e47;filter:none}
/* Sekundär */
.button.outline{background:#fff;color:#1a1464;border:1px solid var(--logo-gray)}
.button.outline:hover{background:#f3f4f6}
.nav-close {
all: unset; /* entkoppelt von globalen Button-Styles */
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; /* ← Buttonbreite */
height: 40px;
border:1px solid transparent; /* ← Buttonhöhe (Touch-Target) */
border-radius: 0.5rem;
box-shadow:0 2px 4px rgba(0,0,0,0.1); transition:box-shadow .2s ease, transform .2s ease;
cursor: pointer;
}
/* 8) ===== Footer ===== */
.site-footer{
border-top:1px solid var(--border);
background:var(--surface);
color:var(--muted);
padding:var(--space-m) 0 var(--space-l);
}
.site-footer .wrapper{padding-inline:.7rem; padding-block:1.5rem}
.footer-grid{display:grid;gap:var(--space-l);grid-template-columns:1fr;padding:var(--space-xl) 0}
@media (min-width:768px){.footer-grid{grid-template-columns:1.2fr 1fr 1fr}}
.site-footer .brand-logo{height:60px;width:auto;display:block;margin-bottom:var(--space-s)}
.brand-logo.small{height:28px;width:auto}
/* Footer-Headings & Links */
.footer-heading{display:block;margin-bottom:.25rem;font-size:1rem;font-weight:400;color:var(--ink);line-height:1.4}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li+li{margin-top:.35rem}
.footer-col a{color:var(--ink);text-decoration:none}
.footer-col a:hover{text-decoration:underline}
.site-footer .stack>*+*{margin-block-start:.5rem}
.site-footer .claim{color:var(--muted);font-size:.95rem;margin-bottom:.5rem;display:block}
/* Socials */
.socials{display:flex;gap:var(--space-m)}
.socials a{display:inline-flex;align-items:center;justify-content:center;color:#666;transition:color .2s ease}
.socials svg{width:24px;height:24px;fill:currentColor;color:#8c96a0;transition:color .2s ease}
.socials a:hover{color:#1a154d}
.socials a:hover svg{color:#1d1363}
/* Footer Meta */
.footer-meta{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:var(--space-m) 0 var(--space-xl);color:var(--muted)}
.footer-meta .dot{opacity:.6}
/* 9) ===== Komponenten ===== */
/* 9.1 Services-Block (Fußleisten-Stil) */
.home-services{margin-top:var(--space-l)}
.home-services .footer-heading{display:block;margin-bottom:.25rem;font-size:1rem;font-weight:600;color:var(--ink)}
.home-services .nav-list{list-style:none;margin:0;padding:0}
.home-services .nav-list li+li{margin-top:.35rem}
.home-services .nav-list a{color:var(--ink);text-decoration:none}
.home-services .nav-list a:hover{color:var(--brand-ink);text-decoration:underline}
/* Kontakt-Link mit Icon */
.home-services .contact-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.75rem;font-size:1rem;font-weight:600;color:#1a1453;text-decoration:none;border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease}
.home-services .contact-link svg{width:1.1em;height:1.1em;flex-shrink:0}
.home-services .contact-link:hover{color:#0e0a36}
/* 9.2 Content-Cards (Über uns etc.) */
.content-card .card{
background:linear-gradient(180deg,#fafafa,rgba(250,250,250,.88));
border:1px solid var(--border); border-radius:var(--radius);
padding:var(--space-s);
box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.content-card + .content-card{margin-top:var(--space-l)}
.content-card figure img{width:100%;height:auto;display:block;border-radius:.75rem;object-fit:cover}
.content-card figcaption{color:var(--muted)}
.content-card h2{font-size:1.25rem;font-weight:600;color:var(--logo-indigo);margin-bottom:var(--space-s);line-height:1.3;text-align:left}
@media (min-width:900px){.content-card h2{font-size:1.35rem}}
.content-card figure img.portrait{border-radius:50%}
/* 9.3 „Bio“-Listen (runde CI-Punkte, wie Über uns) */
.bio-list,
.main ul:not(.nav-list):not(.home-services .nav-list),
.content-card ul:not(.nav-list):not(.home-services .nav-list),
.content-bullets{
list-style:none; margin:0 0 var(--space-m); padding-left:1.1rem;
}
.bio-list li,
.main ul:not(.nav-list):not(.home-services .nav-list) li,
.content-card ul:not(.nav-list):not(.home-services .nav-list) li,
.content-bullets li{
position:relative; margin:.45rem 0; line-height:1.6; text-align:justify;
hyphens:auto;
}
.bio-list li::before,
.main ul:not(.nav-list):not(.home-services .nav-list) li::before,
.content-card ul:not(.nav-list):not(.home-services .nav-list) li::before,
.content-bullets li::before{
content:""; position:absolute; left:-.75rem; top:.85em;
width:.35rem; height:.35rem; border-radius:50%;
background:var(--logo-indigo); box-shadow:0 0 0 2px rgba(28,22,82,.06);
}
/* Listen in Cards nicht im Blocksatz, für bessere Lesbarkeit */
.content-card ul{text-align:start}
/* Sanftere Umbrüche (Chromium/Brave) */
.content-card li,.content-card p{
-webkit-hyphens:auto; overflow-wrap:anywhere; word-break:normal;
}
@supports (text-wrap:pretty){.content-card li,.content-card p{text-wrap:pretty}}
/* 9.4 Kompakte Liste (z. B. Anfahrt) – nur Abstände, Marker wie oben */
.compact{list-style:none;padding-left:1.1rem;margin:0}
.compact li{position:relative;margin:.35rem 0;line-height:1.55}
.compact li::before{content:"";position:absolute;left:-.75rem;top:.85em;width:.32rem;height:.32rem;border-radius:50%;background:var(--logo-indigo);box-shadow:0 0 0 2px rgba(28,22,82,.06)}
/* 9.5 Team/Allgemeine Grid-Listen */
.list-grid{display:grid;gap:var(--space-l)}
@media (min-width:700px){.list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.list-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.list-grid .footer-heading{font-size:1rem;font-weight:700;color:#6b7280;margin:0 0 .25rem}
/* 9.6 Map-Frame */
.map-frame{border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.06);background:#f6f6f7}
.map-frame iframe{display:block;width:100%;height:300px;border:0}
@media (min-width:900px){.map-frame iframe{height:420px}}
/* 9.7 Zweispaltig für ÖPNV/Auto ab Tablet */
.grid.content-card{display:grid;gap:var(--space-l)}
@media (min-width:720px){.grid.content-card{grid-template-columns:repeat(2,minmax(0,1fr))}}
.content-card .footer-heading{font-size:1rem;font-weight:700;color:#6b7280;margin:0 0 .25rem}
/* 10) ===== Sonstiges ===== */
/* Adressen neutral (nicht kursiv) & kompakter */
address{font-style:normal;margin-bottom:.5rem;line-height:1.4}
address.stack.small{margin-bottom:.25rem}
/* Externes-Link-Symbol allgemein (nur bei target=_blank) */
a[target="_blank"]::after{
content:url('data:image/svg+xml;utf8,');
margin-left:.25em; vertical-align:middle;
}
/* Code-Blöcke lesbarer */
code{
font-size:1.25em; font-family:monospace;
background:#f5f5f5; padding:.15em .3em; border-radius:.25em;
}
/* Shell/Sidebar-Layout (falls benötigt) */
.shell{display:block}
.shell:not(:has(.sidebar)) .main .measure{
/*max-width: 90ch; /* angenehm lang, nutzt aber mehr Breite */
max-width:none;
}
.sidebar{border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-m);background:#fff}
.sidebar{ margin-top: var(--space-m); } /* mobil */
@media (min-width:600px){ .sidebar{ margin-top: var(--space-l); } } /* ab Tablet */
.main{min-width:0}
@media (min-width:900px){
.shell{ display:block; }
.sidebar{
position: sticky;
top: calc(var(--header-h) + 12px); /* Abstand unter Header */
}
}
@media (min-width:900px){
body:not(.has-sidebar) .main{ grid-column: 1 / -1; } /* falls irgendwo doch Grid aktiv wäre */
}
@media (min-width:768px){
body:not(.has-sidebar) .main{ grid-column: 1 / -1; } /* falls irgendwo doch Grid aktiv wäre */
}
@media (max-width:899.98px){.sidebar{display:none}}
/* Abschnittsabstände (erste/letzte Section) */
.section:first-of-type{padding-top:var(--space-s)}
.section:last-of-type{padding-bottom:var(--space-m)}
/* Tabellen/Formulare Basis */
.table-responsive{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th,td{padding:.6rem;border-bottom:1px solid var(--border);text-align:left}
form input,form select,form textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--border);border-radius:.5rem}
/* 11) ===== Print ===== */
@media print{
.nav-toggle,.nav,button{display:none !important}
.card{border:none;padding:0}
.site-header,.site-footer{position:static;border:none}
.section{padding:0}
a{text-decoration:underline}
}
/* Externe-Link-Icon bei Social-Media-Links deaktivieren */
.socials a[target="_blank"]::after {
content: none !important;
}
/* Sicherheit: bei Kontaktlinks KEIN extra Icon */
.contact-link::after {
content: none !important;
}
a {
color: var(--logo-indigo);
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: var(--brand-ink); /* etwas dunkleres Blau beim Hover */
}
/* Buttons: Textfarbe fixen */
a.button,
a.button:hover,
a.button:focus-visible,
.button,
.button:hover,
.button:focus-visible{
color:#fff !important; /* Primär-Button bleibt weiß */
text-decoration:none; /* keine Unterstreichung auf Buttons */
}
/* Outline-Variante: Indigo beibehalten */
.button.outline,
a.button.outline,
.button.outline:hover,
a.button.outline:hover,
.button.outline:focus-visible,
a.button.outline:focus-visible{
color: var(--logo-indigo) !important;
text-decoration:none;
}
a svg {
fill: currentColor;
color: inherit;
}
.footer-col a,
.socials a {
color: var(--logo-indigo);
}
.footer-col a:hover,
.socials a:hover {
color: var(--brand-ink);
}
/* Einheitliche Button-Breite */
button,
.button {
display: inline-block;
min-width: 14rem; /* gleiche Grundlänge für alle */
text-align: center; /* Text mittig */
justify-content: center; /* auch für Flex-Buttons */
}
/* Hamburger-Button von der Regel ausnehmen */
.nav-toggle {
width: auto; /* oder min-content, bleibt kompakt */
min-width: unset; /* überschreibt evtl. vererbte Regeln */
justify-content: center;
}
/* ==== Cookie Consent (schlank) ==== */
:root{
--cc-bg:#111827; /* Banner-Hintergrund (dunkel, gut lesbar) */
--cc-ink:#ffffff; /* Text auf Banner */
--cc-btn:#1a1464; /* Primärbutton = Logo-Indigo */
--cc-btn-ink:#ffffff;
--cc-outline:#6c7383; /* Sekundärbutton-Rand = Logo-Grau */
}
.cc-banner{
position:fixed; inset:auto 0 0 0; z-index:9999;
background:var(--cc-bg); color:var(--cc-ink);
padding:1rem; box-shadow:0 -6px 24px rgba(0,0,0,.25);
font-size:.95rem;
}
.cc-wrap{max-width:var(--max-w); margin-inline:auto; display:grid; gap:.75rem;}
@media (min-width:700px){ .cc-wrap{grid-template-columns:1fr auto; align-items:center} }
.cc-actions{display:flex; gap:.5rem; flex-wrap:wrap}
.cc-btn{border:1px solid transparent; border-radius:.6rem; padding:.55rem .9rem; cursor:pointer; font-weight:600}
.cc-btn--primary{background:var(--cc-btn); color:var(--cc-btn-ink)}
.cc-btn--ghost{background:transparent; color:#fff; border-color:var(--cc-outline)}
.cc-link{color:#cfe0ff; text-decoration:underline}
/* Mini-Einstellungs-Panel */
.cc-modal{position:fixed; inset:0; z-index:10000; display:none}
.cc-modal[data-open="true"]{display:block}
.cc-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5)}
.cc-card{
position:relative; margin:10vh auto 0; max-width:38rem;
background:#fff; color:var(--ink); border-radius:.75rem; padding:1rem;
box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.cc-card h3{margin:0 0 .5rem; color:var(--logo-indigo)}
.cc-row{display:flex; justify-content:space-between; align-items:center; padding:.5rem 0; border-bottom:1px solid var(--border)}
.cc-row:last-child{border-bottom:0}
.cc-card .cc-actions{justify-content:flex-end; margin-top:1rem}
/* Platzhalter für blockierte Embeds (z. B. Maps) */
.cc-embed{
position:relative; border:1px solid var(--border); border-radius:.75rem;
background:#f6f7f9; min-height:220px; display:grid; place-items:center; text-align:center; padding:1rem;
}
.cc-embed .cc-embed-msg{max-width:40ch; color:#444}
.cc-embed .cc-embed-actions{margin-top:.5rem}
/* Alternative zum Cookie-Consent????? */
.cc-panel{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:9999}
.cc-panel[hidden]{display:none}
.cc-panel__dialog{background:#fff;border:1px solid var(--border);border-radius:.75rem;box-shadow:0 10px 24px rgba(0,0,0,.1);padding:1rem;max-width:28rem;width:min(92vw,28rem)}
.cc-panel__group{margin:.75rem 0}
.cc-switch{display:flex;gap:.5rem;align-items:center}
.cc-panel__actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}
.cc-btn{appearance:none;border:1px solid var(--border);background:#fff;padding:.5rem .8rem;border-radius:.6rem;cursor:pointer}
.cc-btn--primary{background:#1a1464;color:#fff;border-color:#1a1464}
/* === Consent placeholder – mobile friendly buttons === */
.consent-card .consent-actions{
display: flex;
flex-direction: column;
gap: .5rem; /* space between the two buttons */
}
/* Keep button text from being clipped/shrunk on small screens */
.consent-card .button,
.consent-card .button.outline{
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Make sure outline button keeps its visible text color */
.consent-card .button.outline{
background: #fff;
color: var(--logo-indigo);
border-color: var(--logo-gray);
}
/* === Consent modal – sizing and mobile layout === */
.consent-modal{
position: fixed;
inset: 0;
display: grid;
place-items: center;
background: rgba(0,0,0,.35);
z-index: 1000;
padding: .75rem; /* keeps dialog off the edges */
}
.consent-modal .modal-dialog{
width: min(92vw, 520px); /* fit on phones */
max-height: 90vh; /* avoid off-screen */
overflow: auto;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 12px 30px rgba(0,0,0,.18);
padding: 1rem;
}
/* Buttons in the modal */
.consent-modal .modal-actions{
display: flex;
gap: .5rem;
margin-top: .75rem;
}
/* On narrow phones, stack buttons full width */
@media (max-width: 420px){
.consent-modal .modal-actions{
flex-direction: column;
}
.consent-modal .modal-actions .button,
.consent-modal .modal-actions .button.outline{
width: 100%;
}
}
/* Optional: ensure the checkbox line wraps nicely */
.consent-modal .modal-body label{
display: inline-flex;
align-items: center;
gap: .5rem;
line-height: 1.4;
}
/* ==== Consent-Embed (Platzhalter für Google Maps) ==== */
.cc-embed .cc-embed-actions{
margin-top: .75rem;
}
.cc-embed .cc-btn{
display: block;
width: 100%;
padding: .6rem 1rem;
border-radius: .6rem;
border: 1px solid transparent;
font: inherit;
cursor: pointer;
white-space: nowrap; /* kein Zeilenbruch */
overflow: hidden; /* falls zu lang */
text-overflow: ellipsis; /* sauberer Cut */
box-shadow: 0 2px 4px rgba(0,0,0,.1);
transition: box-shadow .2s ease, transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.cc-embed .cc-btn + .cc-btn{
margin-top: .5rem; /* Abstand zw. Buttons */
}
/* Primary (CI) */
.cc-embed .cc-btn--primary{
background: #1a1464; /* Logo-Indigo */
color: #fff;
border-color: #1a1464;
}
.cc-embed .cc-btn--primary:hover{
background: #120e47;
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0,0,0,.15);
}
/* Ghost/Outline (CI) */
.cc-embed .cc-btn--ghost{
background: #fff;
color: #1a1464;
border-color: #6c7383; /* Logo-Grau */
}
.cc-embed .cc-btn--ghost:hover{
background: #f3f4f6;
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0,0,0,.1);
}
/* ==== Consent-Modal – robust & mobilfreundlich ==== */
/* Backdrop */
.cc-modal-backdrop{
position: fixed;
inset: 0;
display: none; /* Standard: geschlossen */
place-items: center;
padding: .75rem; /* Randabstand am Handy */
background: rgba(0,0,0,.35);
z-index: 1000;
}
/* „offen“-Zustände (je nach Script-Implementierung) */
.cc-modal-backdrop[aria-hidden="false"],
.cc-modal-backdrop.is-open,
.cc-modal-backdrop[data-open="true"]{
display: grid;
}
/* Dialog */
.cc-modal{
width: min(92vw, 520px);
max-height: 90vh;
overflow: auto;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 12px 30px rgba(0,0,0,.18);
padding: 1rem;
}
/* Aktionen im Dialog */
.cc-modal .cc-actions{
display: flex;
gap: .5rem;
margin-top: .75rem;
}
.cc-modal .cc-actions .cc-btn{ width: auto; }
/* Auf sehr kleinen Screens Buttons stapeln */
@media (max-width: 420px){
.cc-modal .cc-actions{ flex-direction: column; }
.cc-modal .cc-actions .cc-btn{ width: 100%; }
}
/* Checkbox-/Label-Zeilen sauber ausrichten */
.cc-modal label{
display: inline-flex;
align-items: center;
gap: .5rem;
line-height: 1.4;
}
/* ==== Modal-Buttons mobil sicher stapeln ==== */
/* Trifft gängige Container-Namen: cc-actions, modal-actions, cc-footer, dialog-actions */
.cc-modal :where(.cc-actions, .cc-modal-actions, .cc-footer, .dialog-actions){
display: flex;
gap: .5rem;
flex-wrap: wrap; /* falls breite Texte → nächste Zeile */
}
/* Buttons in der Leiste: saubere Basis */
.cc-modal :where(.cc-actions, .cc-modal-actions, .cc-footer, .dialog-actions) > *{
max-width: 100%;
}
/* Unter ~480px: Spalte statt Reihe + 100%-Breite */
@media (max-width: 480px){
.cc-modal :where(.cc-actions, .cc-modal-actions, .cc-footer, .dialog-actions){
flex-direction: column;
}
.cc-modal :where(.cc-actions, .cc-modal-actions, .cc-footer, .dialog-actions) > *{
width: 100%;
}
}
/* Falls kein spezieller Container existiert und die Buttons direkt im Modal liegen: */
@media (max-width: 480px){
.cc-modal > button,
.cc-modal .cc-btn{
display: block;
width: 100%;
}
}
@media (max-width: 480px){ .cc-modal .cc-btn{ display:block; width:100%; margin-inline:0; } }
.cc-embed-msg {
text-align:justify;
}
/* Verbesserte Checkboxen-Optik */
#checkboxen_e-mail input[type="checkbox"] {
width: 20px;
height: 20px;
margin-right: 10px;
vertical-align: middle;
cursor: pointer;
accent-color: #007bff; /* Blaue Checkbox-Farbe */
}
/* Stil für das Label der Checkbox */
#checkboxen_e-mail label {
display: inline-block;
font-size: 0.9rem;
color: #333;
line-height: 1.4;
margin: 0.5rem 0;
cursor: pointer;
}
/* Stil für den gesamten Bereich der Checkboxen */
#checkboxen_e-mail p {
margin: 0.5rem 0;
}
/* Hover-Effekt für die Labels */
#checkboxen_e-mail input[type="checkbox"]:hover + label {
color: #007bff; /* Label wird blau beim Hover */
}
/* Fokus-Effekt auf die Checkboxen */
#checkboxen_e-mail input[type="checkbox"]:focus {
outline: 2px solid #007bff;
}
#feld-anmerkungen {
margin-top: 0.5rem;
font-size: 80%;
}
/* CI aus dem Logo */
/*
:root{
--logo-indigo: #1c1652; /* Primär (Senden)
--logo-gray: #6c7383; /* Sekundär (Zurücksetzen)
}
*/
/* AO-View (mobil-first)
.ao-view{ max-width: 720px; margin: 0 auto; padding: 0 .75rem; }
.ao-view .stack > *{ margin-block: .75rem; }
.ao-view h1{ color: var(--logo-indigo); font-size: clamp(1.6rem, 3.8vw, 2rem); margin: .5rem 0 .25rem; }
.ao-view h2{ color: var(--logo-indigo); font-size: clamp(1.25rem, 3.4vw, 1.5rem); margin-top: 1.2rem; }
.ao-view h3{ color: var(--logo-indigo); font-size: 1.05rem; margin-top: .9rem; }
.ao-view p{ line-height: 1.6; }
.ao-view ul{ padding-left: 1.1rem; margin: .4rem 0 .8rem; }
.ao-view li{ margin: .3rem 0; }
.ao-view a{ color: var(--logo-indigo); text-underline-offset: .15em; }
.ao-view a:hover{ text-decoration-thickness: 2px; }
*/
/* responsives Video */
.ao-view .video-wrap{
position: relative; width: 100%; aspect-ratio: 16/9;
background: #000; border-radius: 12px; overflow: hidden;
box-shadow: 0 6px 22px rgba(0,0,0,.08);
}
.ao-view .video-wrap video{
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Fußnote */
.fussnote{
font-size: .9rem; color: var(--logo-gray); line-height: 1.5;
border-top: 1px solid rgba(0,0,0,.08); padding-top: .75rem; margin-top: 1rem;
border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: .75rem; margin-top: 1rem;
text-align:left;
}
.ao-view .backref{ margin-left: .35rem; font-size:.95em; text-decoration: none; }
.video-wrap {
display:block;
margin: 0 auto;
}
/* Klinische/Gesundheitspsychologie – mobil-first, scoped */
.klin-view{ max-width: 720px; margin: 0 auto; padding: 0 .75rem; }
.klin-view .stack > *{ margin-block: .75rem; }
.klin-view h1{ color: var(--logo-indigo); font-size: clamp(1.6rem, 3.8vw, 2rem); margin: .5rem 0 .25rem; }
.klin-view h2{ color: var(--logo-indigo); font-size: clamp(1.25rem, 3.4vw, 1.5rem); margin-top: 1.2rem; }
.klin-view h3{ color: var(--logo-indigo); font-size: 1.05rem; margin-top: .9rem; }
.klin-view p{ line-height: 1.6; }
.klin-view ul{ padding-left: 1.1rem; margin: .4rem 0 .8rem; }
.klin-view li{ margin: .3rem 0; }
/* existierende Klassen hübsch machen */
.klin-view .klinpsy_liste li::marker,
.klin-view .gespsych_liste li::marker{ color: var(--logo-indigo); }
.klin-view .klinpsy_innere_liste{ margin-top: .35rem; }
.klin-view .klinpsy_innere_liste li::marker{ color: var(--logo-gray); }
/* Links & Fußnote */
.klin-view a{ color: var(--logo-indigo); text-underline-offset:.15em; }
.klin-view a:hover{ text-decoration-thickness: 2px; }
.klin-view .fussnote{
font-size:.9rem; color: var(--logo-gray); line-height:1.5;
border-top:1px solid rgba(0,0,0,.08); padding-top:.75rem; margin-top:1rem;
}
.klin-view .backref{ margin-left:.35rem; font-size:.95em; text-decoration:none; }
/* Psychotherapie – scoped */
.psychotherapie-view {
max-width: 720px;
margin: 0 auto;
padding: 0 0.75rem;
}
.psychotherapie-view h1, .psychotherapie-view h2 {
color: var(--logo-indigo);
margin: 1rem 0;
}
.psychotherapie-view h1 {
font-size: clamp(1.6rem, 3.8vw, 2rem);
}
.psychotherapie-view h2 {
font-size: clamp(1.25rem, 3.4vw, 1.5rem);
}
.psychotherapie-view p, .psychotherapie-view li {
line-height: 1.6;
}
.psychotherapie-view ul {
padding-left: 1.1rem;
margin: 0.6rem 0;
}
.psychotherapie-view li {
margin: 0.3rem 0;
}
.psychotherapie-view b {
color: var(--logo-indigo);
}
.psychotherapie-view .fussnote {
font-size: 0.9rem;
color: var(--logo-gray);
line-height: 1.5;
margin-top: 1.2rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.psychotherapie-view .backref {
margin-left: 0.35rem;
font-size: 0.95em;
text-decoration: none;
}
.psychotherapie-view a {
color: var(--logo-indigo);
text-underline-offset: 0.15em;
}
.psychotherapie-view a:hover {
text-decoration-thickness: 2px;
}
.psychotherapie-view b {
color: var(--logo-indigo);
}
/* Supervision – scoped */
.supervision-view {
max-width: 720px;
margin: 0 auto;
padding: 0 0.75rem;
}
.supervision-view h1, .supervision-view h2 {
color: var(--logo-indigo);
margin: 1rem 0;
}
.supervision-view h1 {
font-size: clamp(1.6rem, 3.8vw, 2rem);
}
.supervision-view h2 {
font-size: clamp(1.25rem, 3.4vw, 1.5rem);
}
.supervision-view p, .supervision-view li {
line-height: 1.6;
}
.supervision-view ul {
padding-left: 1.1rem;
margin: 0.6rem 0;
}
.supervision-view li {
margin: 0.3rem 0;
}
.supervision-view b {
color: var(--logo-indigo);
}
.supervision-view .fussnote {
font-size: 0.9rem;
color: var(--logo-gray);
line-height: 1.5;
margin-top: 1.2rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.supervision-view .backref {
margin-left: 0.35rem;
font-size: 0.95em;
text-decoration: none;
}
.supervision-view a {
color: var(--logo-indigo);
text-underline-offset: 0.15em;
}
.supervision-view a:hover {
text-decoration-thickness: 2px;
}
/* Coaching – scoped */
.coaching-view {
max-width: 720px;
margin: 0 auto;
padding: 0 0.75rem;
}
.coaching-view h1, .coaching-view h2 {
color: var(--logo-indigo);
margin: 1rem 0;
}
.coaching-view h1 {
font-size: clamp(1.6rem, 3.8vw, 2rem);
}
.coaching-view h2 {
font-size: clamp(1.25rem, 3.4vw, 1.5rem);
}
.coaching-view p, .coaching-view li {
line-height: 1.6;
}
.coaching-view ul {
padding-left: 1.1rem;
margin: 0.6rem 0;
}
.coaching-view li {
margin: 0.3rem 0;
}
.coaching-view b {
color: var(--logo-indigo);
}
.coaching-view .fussnote {
font-size: 0.9rem;
color: var(--logo-gray);
line-height: 1.5;
margin-top: 1.2rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.coaching-view .backref {
margin-left: 0.35rem;
font-size: 0.95em;
text-decoration: none;
}
.coaching-view a {
color: var(--logo-indigo);
text-underline-offset: 0.15em;
}
.coaching-view a:hover {
text-decoration-thickness: 2px;
}
/* Biofeedback – scoped */
.biofeedback-view {
max-width: 720px;
margin: 0 auto;
padding: 0 0.75rem;
}
.biofeedback-view h1, .biofeedback-view h2 {
color: var(--logo-indigo);
margin: 1rem 0;
}
.biofeedback-view h1 {
font-size: clamp(1.6rem, 3.8vw, 2rem);
}
.biofeedback-view h2 {
font-size: clamp(1.25rem, 3.4vw, 1.5rem);
}
.biofeedback-view p, .biofeedback-view li {
line-height: 1.6;
}
.biofeedback-view ul {
padding-left: 1.1rem;
margin: 0.6rem 0;
}
.biofeedback-view li {
margin: 0.3rem 0;
}
.biofeedback-view b {
color: var(--logo-indigo);
}
.biofeedback-view .fussnote {
font-size: 0.9rem;
color: var(--logo-gray);
line-height: 1.5;
margin-top: 1.2rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.biofeedback-view .backref {
margin-left: 0.35rem;
font-size: 0.95em;
text-decoration: none;
}
.biofeedback-view a {
color: var(--logo-indigo);
text-underline-offset: 0.15em;
}
.biofeedback-view a:hover {
text-decoration-thickness: 2px;
}
.biofeedback-view img {
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
.biofeedback-view .last-paragraph {
border-bottom:1px solid rgba(0,0,0,.08);
padding-top:0.75rem;
margin-top:1rem;
padding-bottom:0.75rem;
}
/* Neurofeedback View */
.neurofeedback-view {
max-width: 720px;
margin: 0 auto;
padding: 0 0.75rem;
}
.neurofeedback-view h1, .neurofeedback-view h2 {
color: var(--logo-indigo);
margin: 1rem 0;
}
.neurofeedback-view h1 {
font-size: clamp(1.6rem, 3.8vw, 2rem);
}
.neurofeedback-view h2 {
font-size: clamp(1.25rem, 3.4vw, 1.5rem);
}
.neurofeedback-view p, .neurofeedback-view li {
line-height: 1.6;
}
.neurofeedback-view ul {
padding-left: 1.1rem;
margin: 0.6rem 0;
}
.neurofeedback-view li {
margin: 0.3rem 0;
}
.neurofeedback-view b {
color: var(--logo-indigo);
}
.neurofeedback-view .fussnote {
font-size: 0.9rem;
color: var(--logo-gray);
line-height: 1.5;
margin-top: 1.2rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.neurofeedback-view .backref {
margin-left: 0.35rem;
font-size: 0.95em;
text-decoration: none;
}
.neurofeedback-view a {
color: var(--logo-indigo);
text-underline-offset: 0.15em;
}
.neurofeedback-view a:hover {
text-decoration-thickness: 2px;
}
.neurofeedback-view img {
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
.neurofeedback-view .literatur_bfb p {
font-size: 0.9rem;
}
/* Unternehmensberatung View */
.consulting-view {
max-width: 720px;
margin: 0 auto;
padding: 0 1rem;
}
.consulting-view h1, .consulting-view h2 {
color: var(--logo-indigo);
margin-bottom: 1rem;
}
.consulting-view h1 {
font-size: clamp(1.8rem, 4vw, 2.2rem);
}
.consulting-view h2 {
font-size: clamp(1.4rem, 3.5vw, 1.8rem);
font-style: italic;
margin-top: 0;
}
.consulting-view p, .consulting-view li {
line-height: 1.6;
margin-bottom: 1.2rem;
}
.consulting-view b {
color: var(--logo-indigo);
}
.consulting-view .leitspruch {
font-size: 1.2rem;
font-weight: 600;
color: var(--logo-gray);
text-align: center;
margin: 1.5rem 0;
}
.consulting-view blockquote {
font-style: italic;
font-size: 1rem;
color: var(--logo-gray);
margin: 1rem 0;
padding-left: 1rem;
border-left: 4px solid var(--logo-indigo);
}
.consulting-view .fussnote_consulting {
font-size: 0.9rem;
color: var(--logo-gray);
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.consulting-view a {
color: var(--logo-indigo);
text-decoration: none;
}
.consulting-view a:hover {
text-decoration: underline;
}
.consulting-view .fussnote {
font-size: 0.9rem;
color: var(--logo-gray);
line-height: 1.5;
margin-top: 1.2rem;
padding-top: 0.75rem;
padding-bottom:0.75rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* Hirnlounge® View */
.hirnlounge-view {
max-width: 720px;
margin: 0 auto;
padding: 0 1rem;
}
.hirnlounge-view h1 {
font-size: clamp(2rem, 5vw, 2.5rem);
color: var(--logo-indigo);
text-align: center;
margin-bottom: 1.5rem;
}
.hirnlounge-view p, .hirnlounge-view li {
line-height: 1.6;
margin-bottom: 1.5rem;
}
.hirnlounge-view b {
color: var(--logo-indigo);
}
.hirnlounge-view ul {
padding-left: 1.5rem;
margin-bottom: 2rem;
}
.hirnlounge-view a {
color: var(--logo-indigo);
text-decoration: none;
}
.hirnlounge-view a:hover {
text-decoration: underline;
}
.hirnlounge-view .fussnote-hirnlounge {
font-size: 0.9rem;
color: var(--logo-gray);
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
/* Exclusive Setting View */
.exclusive-setting-view {
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
}
.exclusive-setting-view h1 {
font-size: clamp(2rem, 5vw, 2.5rem);
color: var(--logo-indigo);
text-align: center;
margin-bottom: 1.5rem;
}
.exclusive-setting-view p {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 1.5rem;
text-align: center;
}
.exclusive-setting-view ul {
padding-left: 1.5rem;
margin-bottom: 2rem;
}
.exclusive-setting-view .footer-note {
font-size: 0.9rem;
color: var(--logo-gray);
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
/* Seminare View */
.seminare-view {
max-width: 800px;
margin: 0 auto;
padding: 1rem;
}
.seminare-view p {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 1.5rem;
text-align: justify;
}
.seminare-view .quote {
font-style: italic;
font-size: 1.2rem;
margin: 2rem 0;
text-align: center;
border-left: 4px solid var(--logo-indigo);
padding-left: 10px;
}
.seminare-view ul {
padding-left: 1.5rem;
margin-bottom: 2rem;
}
.seminare-view .underline {
text-decoration: underline;
}
.seminare-view .leitspruch {
font-size: 1.2rem;
font-weight: bold;
color: var(--logo-indigo);
margin-top: 2rem;
}
/* Styling für das Login-Formular */
#zugang_vl {
background-color: var(--surface);
padding: var(--space-m);
border-radius: var(--radius);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
#zugang_vl td {
padding: var(--space-s);
}
#zugang_vl input {
width: 100%;
padding: var(--space-xs) var(--space-s);
border-radius: var(--radius);
border: 1px solid var(--border);
font-size: 1rem;
}
#vl_buttons input[type="submit"],
#vl_buttons input[type="reset"] {
padding: var(--space-s) var(--space-m);
background-color: var(--logo-indigo);
color: #fff;
border: none;
border-radius: var(--radius);
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s ease;
}
#vl_buttons input[type="submit"]:hover,
#vl_buttons input[type="reset"]:hover {
background-color: var(--logo-gray);
}
/* Button für das Login-Formular */
#vl_buttons {
display: flex;
justify-content: center;
gap: var(--space-m);
margin-top: var(--space-l);
}
#vl_buttons input[type="reset"] {
background-color: transparent;
border: 1px solid var(--logo-gray);
color: var(--logo-indigo);
}
.form-container {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* View: Downloads */
.downloads .downloads-texteinzug {
padding-left: 20px;
margin-bottom: 15px;
font-size: 1rem;
line-height: 1.6;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 15px;
}
.downloads .time {
border-top: 1px solid rgba(0, 0, 0, 0.08);
padding-top:1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.downloads .bi-download {
color: #5f6368; /* Farbe anpassen */
width: 20px; /* Größe anpassen */
height: 20px; /* Größe anpassen */
margin-left: 5px; /* Abstand zum Text */
}
.downloads .download-link {
text-decoration: none;
display: inline-flex;
align-items: center;
}
.downloads .download-link img {
width: 20px; /* Setze hier die gewünschte Größe des Icons */
height: 20px;
margin-left: 5px; /* Abstand zwischen Text und Icon */
}
.downloads .space-between {
margin-right:10px;
}
#downloads a[target="_blank"]::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 24 24' width='12' height='12'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h6V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6h-2v6H5V5z'%3E%3C/path%3E%3C/svg%3E");
margin-left: .25em;
vertical-align: middle;
}
/* Kunden-View – feine Typo, dezente Hervorhebungen */
.kunden {
--accent: var(--logo-indigo);
}
.kunden p {
line-height: 1.7;
font-size: 1.05rem;
margin: .85rem 0; /* sehr dunkles Grau-Grün für gute Lesbarkeit */
hyphens: auto;
text-wrap: pretty;
}
/* Intro-Absatz leicht „eingezogen“ als Blickanker */
.kunden p:first-of-type {
padding-left: .75rem;
border-left: 4px solid color-mix(in srgb, var(--logo-gray) 60%, #fff 40%);
}
/* Letzter Absatz als Callout-Karte (mit Sekretariatslink) */
.kunden p:last-of-type {
margin-top: 1.1rem;
padding: .9rem 1rem;
background: color-mix(in srgb, var(--accent) 6%, #fff);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
/*border: 1px solid color-mix(in srgb, var(--accent) 18%, #fff);
border-radius: 12px;*/
}
/* Link im Callout als dezenter „Pill“-Button */
.kunden p:last-of-type a {
display: inline-flex;
align-items: center;
gap: .45rem;
/* padding: .45rem .8rem;*/
text-decoration: none;
color: var(--accent);
font-weight: 600;
}
.kunden p:last-of-type a:hover,
.kunden p:last-of-type a:focus-visible {
background: var(--accent);
color: #fff;
}
/* Optional: etwas kompakter auf ganz kleinen Screens */
@media (max-width: 380px) {
.kunden p { font-size: 1rem; }
}
/* ===== Pressefotos – Grid ===== */
.press-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.press-thumb{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.press-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:480px){.press-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){.press-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ===== Lightbox ===== */
.press-lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:6vw;background:rgba(0,0,0,.6);z-index:1000}
.press-lightbox.open{display:flex}
.press-stage{position:relative}
.press-stage img{max-width:min(92vw,1100px);max-height:80vh;border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
/* ===== Controls – alte Ellipsen zuverlässig abschalten ===== */
.press-lightbox .press-nav::before,
.press-lightbox .press-nav::after{content:none !important}
/* Reset + neuer Look der Buttons (kleine Kreise mit Pfeil-Zeichen) */
.press-lightbox .press-nav{
all:unset; /* killt geerbte/alte Button-Styles */
position:absolute; display:grid; place-items:center;
width:40px; height:40px; border-radius:50%;
background:rgba(255,255,255,.92);
box-shadow:0 2px 10px rgba(0,0,0,.25);
color:var(--logo-indigo,#1e1b4b);
cursor:pointer; user-select:none;
font-size:20px; line-height:1; /* für ‹ › als Inhalt */
}
.press-lightbox .press-nav:hover{background:#fff}
.press-lightbox .press-nav:active{transform:scale(.98)}
/* Pfeile weiter an den Rand */
.press-lightbox .prev{left:clamp(10px,4vw,36px); top:50%; transform:translateY(-50%)}
.press-lightbox .next{right:clamp(10px,4vw,36px); top:50%; transform:translateY(-50%)}
/* Close (X) ohne Hintergrund, etwas weiter unten/rechts */
.press-lightbox .close{
all:unset;
position:absolute;
top:clamp(14px,3vw,30px);
right:clamp(14px,3vw,30px);
color:#fff;
font-size:28px;
line-height:1;
cursor:pointer;
}
.press-lightbox .close:active{transform:scale(.95)}
.pressefotos h2 {
margin-top:1rem;
padding-top:0.75rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.pressefotos p:last-of-type{
padding-bottom:0.75rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.pressefotos .download-link img {
width: 20px; /* Setze hier die gewünschte Größe des Icons */
height: 20px;
margin-left: 5px; /* Abstand zwischen Text und Icon */
}
/* --- Pressefotos: mehr Spalten ab Desktop --- */
@media (min-width: 1024px){
.press-grid{
grid-template-columns: repeat(5, minmax(0,1fr));
gap: 16px;
}
}
@media (min-width: 1440px){
.press-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
}
/* --- Lightbox: Pfeile weiter außen, Close dezenter --- */
@media (min-width: 1024px){
.press-lightbox{ padding: 5vh 6vw; }
.press-stage img{ max-height: 82vh; }
.press-lightbox .prev{ left: max(24px, 5vw); }
.press-lightbox .next{ right: max(24px, 5vw); }
.press-lightbox .press-nav{ width: 42px; height: 42px; }
.press-lightbox .close{
top: clamp(16px, 2vw, 28px);
right: clamp(16px, 2vw, 28px);
font-size: 32px;
}
}
/* --- Downloads: angenehme Lesebreite auf Desktop --- */
@media (min-width: 1024px){
.downloads .downloads-texteinzug{
max-width: 75ch;
margin-inline: auto;
}
}
/* Desktop-Header: Logo links, Menü rechts */
@media (min-width: 900px){
.navbar{
grid-template-columns: auto 1fr; /* Logo | Nav */
align-items: center;
}
.navbar .brand{ justify-self: start; }
}
/* Logo-Größe: nicht stauchen, schön groß */
.navbar .brand-logo{
display:block;
width:auto; /* niemals strecken */
height:auto; /* Verhältnis beibehalten */
max-height: 64px; /* mobile/Tablet */
}
@media (min-width: 1200px){
.navbar .brand-logo{ max-height: 72px; } /* großer Desktop */
}
/* Falls das Logo als Inline-SVG eingebunden wäre, diese Icon-Regel neutralisieren: */
.site-header .brand svg{
width:auto !important;
height:clamp(48px, 6vh, 72px) !important;
}
/* === Header / Desktop-Finetuning (mobil bleibt wie ist) === */
@media (min-width: 900px){
/* Logo links, Menü rechts daneben auf einer Zeile */
.navbar{
grid-template-columns: auto 1fr; /* [Logo] [Navigation] */
align-items: center;
}
.navbar .brand{ justify-self: start; } /* statt end/center */
/* Logo größer und garantiert nicht verzerrt */
.navbar .brand-logo{
height: clamp(64px, 6vw, 84px); /* skaliert moderat mit */
width: auto; /* Seitenverhältnis bewahren */
}
/* Menüabstand etwas luftiger */
.nav ul{ gap: 1.25rem; justify-content: flex-start; }
}
/* Falls das Logo als