/* ==========================================================================
   Cirrus Hospitality — main.css
   Gemeinsame Stile aller Marketingseiten (Start, Situationen, Rechtliches,
   Danke, 404). Formularstrecke: form.css. Interner Bereich: admin.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schrift
   Poppins wurde bisher von Google Fonts geladen (externer Request, IP-Übertragung
   an Google). Jetzt: hochwertiger System-Font-Stack, keine Drittanbieter.

   TODO: Poppins lokal hosten (optional, Markenschrift).
   Offizielle Quelle: https://github.com/google/fonts/tree/main/ofl/poppins
   (SIL Open Font License 1.1 — Selbsthosting erlaubt, OFL.txt beilegen).
   Schnitte 400/500/600 als WOFF2 nach /assets/fonts/ legen, dann den
   folgenden Block einkommentieren und "Poppins" vorne in --font ergänzen:

   @font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins-400.woff2") format("woff2")}
   @font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins-500.woff2") format("woff2")}
   @font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-600.woff2") format("woff2")}
   -------------------------------------------------------------------------- */

:root{
  --blue:#00407B; --blue-dk:#00305C; --blue-lt:#8CA9C3; --dark:#273349; --gray:#B9BCC1;
  --line:#DDE3EA; --tint:#F4F6F9; --paper:#FFFFFF; --ink:#273349; --soft:#56627A;
  --onDark:#FFFFFF; --onDark-soft:#C9CED6; --ok:#0B6B4F; --err:#9A2A2A; --err-bg:#FBEEEE;
  --focus:#1668C7; --hover-tint:#EAF1F9;
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius:10px; --header-h:72px;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --blue:#8DB4DE; --blue-dk:#A6C6E8; --dark:#0D1422; --gray:#7B8698;
    --line:#2A3651; --tint:#141D2C; --paper:#0B111B; --ink:#E8ECF3; --soft:#AEB8CA;
    --ok:#6FD0A8; --err:#F0A0A0; --err-bg:#2A1518; --focus:#9CC3F0; --hover-tint:#1B2738;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 12px)}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{margin:0; background:var(--paper); color:var(--ink); overflow-x:hidden; overflow-wrap:break-word;
  font-family:var(--font); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom,0px)}
img,svg{max-width:100%; height:auto}
img{display:block}
h1,h2,h3,h4{margin:0; font-weight:600; line-height:1.2; letter-spacing:-.012em; hyphens:none; -webkit-hyphens:none}
p{margin:0 0 14px}
a{color:inherit}
ul{margin:0; padding:0}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
@media(min-width:640px){.wrap{padding:0 28px}}
.narrow{max-width:760px}
.center{text-align:center}
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Fokus sichtbar, aber nur bei Tastaturbedienung */
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px}
.on-dark :focus-visible,.site-footer :focus-visible{outline-color:#9CC3F0}

.skip-link{position:absolute; left:12px; top:-60px; z-index:500; background:var(--blue); color:#fff; padding:12px 18px;
  border-radius:6px; text-decoration:none; font-weight:500}
.skip-link:focus{top:12px}

/* --------------------------------------------------------------------------
   Wortmarke
   -------------------------------------------------------------------------- */
.wordmark{display:inline-flex; flex-direction:column; align-items:flex-start; line-height:0; text-decoration:none;
  border-bottom:1px solid rgba(185,188,193,.75); padding-bottom:7px}
.wordmark img{height:26px; width:auto}
.wordmark picture{display:block; line-height:0}
.wordmark .sub2{font-size:10.5px; letter-spacing:.24em; color:var(--gray); margin-top:9px; line-height:1; font-weight:500}
.wordmark.on-dark-mark{border-bottom-color:rgba(255,255,255,.3)}
.wordmark.on-dark-mark .sub2{color:var(--blue-lt)}
.wordmark.big{border:0; padding:0; align-items:center}
.wordmark.big img{height:40px}
.wordmark.big .sub2{width:100%; text-align:center; font-size:13px; letter-spacing:.3em; text-indent:.3em; margin-top:12px}
@media(max-width:640px){.wordmark.big img{height:32px} .wordmark.big .sub2{font-size:11.5px}}

/* --------------------------------------------------------------------------
   Buttons — Hierarchie:
   .btn.primary  = „Unverbindliche Ersteinschätzung anfragen" (einziger Hauptweg)
   .btn.outline  = „Direkt anrufen" (Sekundärweg)
   -------------------------------------------------------------------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; text-decoration:none;
  padding:13px 26px; font-size:16.5px; font-weight:600; line-height:1.25; border-radius:6px; border:1.5px solid transparent;
  cursor:pointer; font-family:inherit; text-align:center; transition:background-color .15s, color .15s, border-color .15s}
.btn.primary{background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 1px 2px rgba(0,32,64,.18)}
.btn.primary:hover{background:var(--blue-dk); border-color:var(--blue-dk)}
.btn.outline{border-color:currentColor; color:var(--blue); background:transparent; font-weight:500}
.btn.outline:hover{background:var(--hover-tint)}
.btn.sm{min-height:44px; padding:9px 16px; font-size:15px}
.btn.wide{width:100%}
.btn svg{flex:none}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed}
@media (prefers-color-scheme: dark){ .btn.primary{color:#0B111B} }
.on-dark .btn.primary{background:#fff; color:#00305C; border-color:#fff}
.on-dark .btn.primary:hover{background:#E6EEF7; border-color:#E6EEF7}
.on-dark .btn.outline{color:#fff}
.on-dark .btn.outline:hover{background:rgba(255,255,255,.1)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
@media(max-width:480px){ .cta-row .btn{width:100%} }

/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */
.site-header{position:sticky; top:0; z-index:60; background:var(--paper); border-bottom:1px solid var(--line)}
.site-header .wrap{max-width:1240px; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:var(--header-h); padding-top:10px; padding-bottom:10px}
.site-nav{display:none}
@media(min-width:1120px){
  .site-nav{display:flex; align-items:center}
  .site-nav a{text-decoration:none; color:var(--ink); font-size:14px; line-height:1.25; font-weight:500; padding:6px 16px}
  .site-nav a + a{border-left:1px solid var(--line)}
  .site-nav a span{display:block; font-weight:400; color:var(--soft)}
  .site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--blue)}
  .site-nav a[aria-current="page"] span{color:var(--blue)}
}
.header-actions{display:flex; align-items:center; gap:8px; flex:none}
.header-actions .btn{white-space:nowrap}
.header-actions .short{display:none}
@media(max-width:560px){
  .header-actions .call-label{display:none}
  .header-actions .call-btn{padding:9px 12px}
  .header-actions .long{display:none}
  .header-actions .short{display:inline}
  .site-header .wordmark img{height:22px}
  .site-header .wordmark .sub2{font-size:9.5px; margin-top:7px}
}

/* --------------------------------------------------------------------------
   Startseite
   -------------------------------------------------------------------------- */
.start{padding:48px 0 56px; background:linear-gradient(175deg, var(--paper) 0%, var(--tint) 100%)}
.start .intro{text-align:center; max-width:780px; margin:0 auto}
.eyebrow{font-size:12.5px; letter-spacing:.14em; font-weight:600; color:var(--blue); text-transform:uppercase; margin:0 0 12px}
.start h1{font-size:clamp(25px,3.4vw,36px); margin:0 auto 14px; max-width:30ch}
.start .lead{color:var(--soft); font-size:18px; max-width:58ch; margin:0 auto}
.start .cta-row{justify-content:center; margin-top:26px}
.promise{display:flex; flex-wrap:wrap; gap:6px 18px; list-style:none; margin:18px 0 0; padding:0; font-size:14.5px; color:var(--soft)}
.promise li{display:inline-flex; align-items:center; gap:7px; text-align:left}
.promise li::before{content:""; width:14px; height:14px; flex:none; background:currentColor; opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.start .promise{justify-content:center}
.promise strong{color:var(--ink); font-weight:600}
.on-dark .promise{color:var(--onDark-soft)}
.on-dark .promise strong{color:#fff}

.situation-head{text-align:center; margin:52px auto 22px; max-width:640px}
.situation-head h2{font-size:clamp(23px,3.2vw,30px)}
.situation-head p{color:var(--soft); margin:10px 0 0}
.personas{display:grid; gap:16px; list-style:none; padding:0}
@media(min-width:900px){.personas{grid-template-columns:repeat(3,1fr)}}
.persona{position:relative; display:flex; flex-direction:column; background:var(--paper); border:1.5px solid var(--line);
  border-radius:14px; padding:24px 22px 22px; transition:border-color .16s, box-shadow .16s}
.persona:hover,.persona:focus-within{border-color:var(--blue); box-shadow:0 14px 34px rgba(0,64,123,.12)}
.persona .num{font-size:12.5px; letter-spacing:.14em; font-weight:600; color:var(--blue); margin-bottom:10px}
.persona h3{font-size:19px; line-height:1.3; margin-bottom:8px}
.persona h3 a{text-decoration:none}
.persona h3 a::after{content:""; position:absolute; inset:0; border-radius:14px}  /* ganze Karte klickbar */
.persona h3 a:focus-visible{outline:none}
.persona:has(a:focus-visible){outline:3px solid var(--focus); outline-offset:3px}
.persona > p{font-size:15.5px; color:var(--soft); margin:0}
.persona .fits{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:15px}
.persona .fits b{display:block; font-weight:600; font-size:14px; margin-bottom:6px}
.persona .fits ul{list-style:none}
.persona .fits li{position:relative; padding-left:18px; color:var(--soft); margin-bottom:4px}
.persona .fits li::before{content:"–"; position:absolute; left:0; color:var(--blue)}
.persona .go{margin-top:auto; padding-top:16px; font-size:15px; font-weight:600; color:var(--blue)}

/* --------------------------------------------------------------------------
   Hero der Situationsseiten
   -------------------------------------------------------------------------- */
.phero{background:linear-gradient(155deg, var(--dark) 0%, #0F3358 58%, #00305C 100%); color:var(--onDark); padding:44px 0 52px}
.phero .back{display:inline-flex; align-items:center; min-height:44px; font-size:15px; color:#C6D6E6; text-decoration:none; margin-bottom:8px}
.phero .back:hover{text-decoration:underline}
.phero .eyebrow{color:#A9C3DC}
.phero h1{font-size:clamp(26px,3.6vw,38px); max-width:22ch}
.phero .lead{margin-top:16px; font-size:18.5px; color:var(--onDark-soft); max-width:50ch}
.phero .promise-head{margin:22px 0 0; font-size:17px; font-weight:600; color:#fff}
.phero .cta-row{margin-top:18px}
.phero .grid{display:grid; gap:30px; align-items:center}
@media(min-width:940px){.phero .grid{grid-template-columns:1.15fr .85fr; gap:48px}}
.phero .skyline{width:100%; max-width:460px; height:auto; opacity:.9; justify-self:end}
@media(max-width:939px){.phero .skyline{display:none}}

/* --------------------------------------------------------------------------
   Abschnitte
   -------------------------------------------------------------------------- */
section{padding:60px 0}
@media(max-width:640px){section{padding:48px 0}}
section.alt{background:var(--tint)}
.kicker{font-size:12.5px; letter-spacing:.14em; font-weight:600; color:var(--blue); margin-bottom:10px; text-transform:uppercase}
h2.sec{font-size:clamp(23px,3.2vw,32px); max-width:26ch}
.sec-p{margin-top:12px; color:var(--soft); font-size:17px; max-width:60ch}

/* Aussagen als Wolke (Pain Points) */
.bubbles{position:relative; margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; list-style:none; padding:0}
.bub{position:relative; display:block; text-decoration:none; color:inherit; background:var(--tint);
  border:1.5px solid var(--line); border-radius:18px; padding:14px 20px; font-size:17px; font-style:italic;
  line-height:1.4; max-width:30ch; transition:border-color .18s, box-shadow .18s, background-color .18s}
.bub .q::before{content:"„"} .bub .q::after{content:"“"}
.bub .tail{position:absolute; left:26px; bottom:-10px; width:18px; height:18px; background:inherit;
  border-right:1.5px solid; border-bottom:1.5px solid; border-color:inherit; transform:rotate(45deg)}
.bub.b2{background:var(--blue); border-color:var(--blue); color:#fff}
@media (prefers-color-scheme: dark){ .bub.b2{color:#0B111B} }
.bub.b3{background:var(--paper)}
.bub:hover{box-shadow:0 12px 30px rgba(0,64,123,.18); border-color:var(--blue)}
.bub.b1:hover,.bub.b3:hover{background:var(--hover-tint)}
.bub.b2:hover{background:var(--blue-dk)}
.bub .add{display:block; font-style:normal; font-size:13px; margin-top:6px; opacity:.85}
@media(min-width:1000px){
  .bubbles{display:block; height:400px}
  .bubbles li{position:absolute}
  .bubbles li:nth-child(1){left:0;   top:10px}
  .bubbles li:nth-child(2){left:52%; top:0}
  .bubbles li:nth-child(3){left:9%;  top:128px}
  .bubbles li:nth-child(4){left:56%; top:140px}
  .bubbles li:nth-child(5){left:0;   top:262px}
  .bubbles li:nth-child(6){left:48%; top:272px}
  .bubbles li:nth-child(odd) .bub{transform:rotate(-.8deg)}
  .bubbles li:nth-child(even) .bub{transform:rotate(.8deg)}
}
.bubcta{margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px}
.bubhint{margin:0; font-size:15.5px; color:var(--soft); max-width:48ch}

/* Themen: Lage -> Ansatz */
.topics{display:grid; gap:0; margin-top:34px; border-top:1px solid var(--line)}
.topic{display:grid; gap:6px 32px; padding:22px 0; border-bottom:1px solid var(--line)}
@media(min-width:820px){.topic{grid-template-columns:.9fr 1.1fr}}
.topic h3{font-size:18px; margin-bottom:6px}
.topic .lage{color:var(--soft); margin:0; font-size:16px}
.topic .ansatz{margin:0; font-size:16.5px}
.topic .ansatz b{display:block; font-size:12.5px; letter-spacing:.12em; color:var(--blue); margin-bottom:4px; text-transform:uppercase}

/* Leistungen */
.services{display:grid; gap:26px 32px; margin-top:34px; list-style:none; padding:0; counter-reset:svc}
@media(min-width:720px){.services{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.services{grid-template-columns:repeat(3,1fr)}}
.services li{border-top:2px solid var(--blue); padding-top:14px; counter-increment:svc}
.services li::before{content:counter(svc,decimal-leading-zero); display:block; font-size:13px; letter-spacing:.12em; font-weight:600; color:var(--blue); margin-bottom:6px}
.services h3{font-size:17.5px; margin-bottom:6px}
.services p{font-size:15.5px; color:var(--soft); margin:0}
.note{margin-top:26px; font-size:14.5px; color:var(--soft); max-width:70ch}

/* Ablauf */
.steps3{display:grid; gap:24px; margin-top:34px; list-style:none; padding:0}
@media(min-width:800px){.steps3{grid-template-columns:repeat(3,1fr)}}
.steps3 li{border-top:2px solid var(--blue); padding-top:14px}
.steps3 .n{display:block; font-size:13px; letter-spacing:.12em; font-weight:600; color:var(--blue); margin-bottom:6px}
.steps3 h3{font-size:18px; margin-bottom:6px}
.steps3 p{font-size:15.5px; color:var(--soft); margin:0}

/* Projekt-Einblick */
.project{display:grid; gap:30px; margin-top:30px}
@media(min-width:960px){.project{grid-template-columns:1.25fr .75fr; align-items:start}}
.gal{display:grid; gap:10px; grid-template-columns:repeat(2,1fr); list-style:none; padding:0; margin:0}
@media(min-width:640px){.gal{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal{margin-top:28px}
.gal figure{margin:0; position:relative}
.gal img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:8px; background:var(--tint)}
.gal figcaption{font-size:13px; color:var(--soft); margin-top:5px; line-height:1.35}
.gal .vis{display:inline-block; font-size:11px; letter-spacing:.06em; font-weight:600; text-transform:uppercase;
  border:1px solid var(--line); border-radius:4px; padding:1px 5px; margin-left:4px; color:var(--soft)}
.facts{margin:26px 0 0; display:grid; gap:14px}
@media(min-width:800px){.facts{grid-template-columns:repeat(3,1fr); gap:24px}}
.facts div{border-left:2px solid var(--blue); padding-left:14px}
.facts dt{font-size:12.5px; letter-spacing:.12em; font-weight:600; color:var(--blue); text-transform:uppercase}
.facts dd{margin:3px 0 0; color:var(--soft); font-size:15.5px}

/* Warum Cirrus */
.why{display:grid; gap:18px; margin-top:30px; list-style:none; padding:0}
@media(min-width:720px){.why{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.why{grid-template-columns:repeat(3,1fr)}}
.why li{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px 20px 18px}
section.alt .why li{background:var(--paper)}
.why h3{font-size:17px; margin-bottom:6px}
.why p{margin:0; font-size:15.5px; color:var(--soft)}

/* FAQ */
.faq{margin-top:30px; max-width:800px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:16px 44px 16px 0; font-size:17px; font-weight:600; position:relative; min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:12px; font-size:24px; font-weight:400; color:var(--blue)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 18px; color:var(--soft); font-size:16px; max-width:66ch}
.faq .a p:last-child{margin:0}

/* Kontaktblock */
.kontakt{display:grid; gap:32px; margin-top:22px; align-items:stretch}
@media(min-width:900px){.kontakt{grid-template-columns:1fr 1fr; gap:48px}}
.kontakt h2{font-size:clamp(25px,3.4vw,34px); margin-bottom:10px}
.kontakt .unter{color:var(--soft); font-size:17px; max-width:40ch; margin:0}
.people{display:grid; gap:18px; margin-top:24px; list-style:none; padding:0}
.pc{display:flex; align-items:center; gap:15px}
.pc img{width:68px; height:68px; border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--line)}
.pc .nm{display:block; font-weight:600; font-size:16.5px}
.pc .role{display:block; font-size:14px; color:var(--soft); margin:1px 0 4px; line-height:1.35}
.pc .ways{display:flex; flex-wrap:wrap; gap:0 14px}
.pc .ways a{display:inline-flex; align-items:center; min-height:32px; color:var(--blue); font-size:15.5px; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.pc.primary-contact img{border-color:var(--blue)}
.kbox{background:var(--tint); border:1px solid var(--line); border-radius:14px; padding:30px 26px; display:flex; flex-direction:column}
section.alt .kbox{background:var(--paper)}
.kbox h3{font-size:21px; margin-bottom:14px; max-width:22ch}
.kbox ul{list-style:none; margin:0 0 24px}
.kbox li{position:relative; padding-left:26px; font-size:16px; color:var(--soft); margin-bottom:8px}
.kbox li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--blue); font-weight:700}
.kbox .btn{margin-top:auto}
.kbox .btn + .btn{margin-top:10px}

/* Abschluss-CTA */
.final{background:linear-gradient(155deg, var(--dark) 0%, #0F3358 60%, #00305C 100%); color:#fff; padding:56px 0}
.final h2{font-size:clamp(24px,3.4vw,32px); max-width:26ch}
.final p{color:var(--onDark-soft); max-width:56ch; margin:12px 0 0}
.final .cta-row{margin-top:22px}

/* --------------------------------------------------------------------------
   Fußzeile (einheitlich auf allen Seiten)
   -------------------------------------------------------------------------- */
.site-footer{background:var(--dark); color:#D0D5DD; padding:44px 0 30px; font-size:14.5px}
@media (prefers-color-scheme: dark){ .site-footer{background:#070B12; border-top:1px solid var(--line)} }
.site-footer .cols{display:grid; gap:28px}
@media(min-width:760px){.site-footer .cols{grid-template-columns:1.35fr 1fr 1fr}}
.site-footer h2{color:#fff; font-weight:600; font-size:14.5px; margin:0 0 10px; letter-spacing:0}
.site-footer p{margin:0 0 10px}
.site-footer ul{list-style:none}
.site-footer li{margin:0}
.site-footer a{color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:3px;
  display:inline-block; padding:3px 0}
.site-footer a:hover{text-decoration-color:#fff}
.site-footer .wordmark{margin-bottom:14px; padding-top:0}
.site-footer .person{margin-bottom:12px}
.site-footer .person b{display:block; color:#fff; font-weight:500}
.site-footer .legal{margin-top:26px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); font-size:13px; color:#B8C0CC}

/* --------------------------------------------------------------------------
   Kontaktdialog (natives <dialog>)
   -------------------------------------------------------------------------- */
.cm{border:0; padding:0; background:transparent; max-width:540px; width:calc(100% - 32px); max-height:calc(100dvh - 32px); color:var(--ink)}
.cm::backdrop{background:rgba(12,20,32,.72)}
.cm .box2{background:var(--paper); border-radius:12px; padding:28px 24px 22px; position:relative; max-height:calc(100dvh - 32px); overflow:auto}
.cm h2{font-size:21px; margin:0 44px 6px 0}
.cm .lead2{color:var(--soft); font-size:15.5px; margin:0 0 18px}
.cm .who2{display:flex; align-items:center; gap:14px; border:1.5px solid var(--line); border-radius:10px; padding:14px; text-decoration:none; color:inherit; margin-bottom:10px}
.cm .who2:hover{border-color:var(--blue); background:var(--tint)}
.cm .who2 img{width:58px; height:58px; border-radius:50%; object-fit:cover; flex:none}
.cm .n2{display:block; font-weight:600; font-size:16.5px}
.cm .r2{display:block; font-size:14px; color:var(--soft); margin:1px 0 4px}
.cm .p2{display:block; font-weight:600; color:var(--blue); font-size:16px}
.cm .x{position:absolute; right:8px; top:8px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:6px; font-size:28px; line-height:1; color:var(--soft); cursor:pointer; font-family:inherit}
.cm .x:hover{background:var(--tint); color:var(--ink)}
.cm .mailalt{display:block; text-align:center; font-size:14.5px; color:var(--soft); margin-top:12px}
.cm .mailalt a{color:var(--blue)}
body.dialog-open{overflow:hidden}

/* --------------------------------------------------------------------------
   Unterseiten (Impressum, Datenschutz, 404)
   -------------------------------------------------------------------------- */
.pagehero{background:linear-gradient(155deg, var(--dark) 0%, #0F3358 60%, #00305C 100%); color:#fff; padding:40px 0 44px}
.pagehero .back{display:inline-flex; align-items:center; min-height:44px; font-size:15px; color:#C6D6E6; text-decoration:none; margin-bottom:6px}
.pagehero .back:hover{text-decoration:underline}
.pagehero h1{font-size:clamp(27px,4vw,40px); max-width:24ch}
.pagehero p{margin-top:14px; font-size:18px; color:var(--onDark-soft); max-width:56ch}
.prose{max-width:820px}
.prose h2{font-size:22px; margin:34px 0 10px}
.prose h2:first-child{margin-top:0}
.prose a{color:var(--blue)}
.prose .hinweis{background:var(--tint); border:1px solid var(--line); border-radius:8px; padding:16px 18px; font-size:15.5px}
.prose .stand{margin-top:34px; color:var(--soft); font-size:15px}
.tiles{display:grid; gap:16px; list-style:none; padding:0}
@media(min-width:800px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tiles a{display:flex; flex-direction:column; gap:10px; text-decoration:none; border:1.5px solid var(--line); border-radius:12px; padding:22px; height:100%}
.tiles a:hover{border-color:var(--blue)}
.tiles h2{font-size:18px}
.tiles span{color:var(--blue); font-weight:600; font-size:15px}

/* --------------------------------------------------------------------------
   Danke-Seite
   -------------------------------------------------------------------------- */
.danke{padding:56px 0 64px}
.danke .ok{width:60px; height:60px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center;
  justify-content:center; margin:0 0 22px}
@media (prefers-color-scheme: dark){ .danke .ok{color:#0B111B} }
.danke h1{font-size:clamp(26px,4vw,36px); margin-bottom:12px}
.danke .lead{color:var(--soft); font-size:18px; max-width:52ch}
.danke-steps{list-style:none; padding:0; margin:30px 0 0; display:grid; gap:0; border-top:1px solid var(--line)}
.danke-steps li{display:grid; grid-template-columns:44px 1fr; gap:0 12px; padding:18px 0; border-bottom:1px solid var(--line)}
.danke-steps .n{width:32px; height:32px; border-radius:50%; border:1.5px solid var(--blue); color:var(--blue); font-weight:600;
  display:flex; align-items:center; justify-content:center; font-size:15px}
.danke-steps h2{font-size:17px; margin:4px 0 4px}
.danke-steps p{margin:0; color:var(--soft); font-size:15.5px}
.danke .box{margin-top:30px; border:1px solid var(--line); border-radius:12px; padding:22px}
.danke .box h2{font-size:17px; margin-bottom:14px}
.danke .box .people{margin-top:0}
.danke .back-home{margin-top:26px}
.danke .back-home a{color:var(--blue)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important; animation:none!important; scroll-behavior:auto!important}
  .bubbles li .bub{transform:none!important}
}
@media print{
  .site-header,.site-footer,.cm,.final,.skip-link{display:none!important}
  body{font-size:12pt}
}
.site-footer h2.mt{margin-top:22px}

/* ===== Anpassungen Cirrus, Stand 25.09. ===== */

/* Startseite: Logo groß, Claim als Unterzeile */
.intro-clean{text-align:center; padding:8px 0 10px}
.wordmark.mega{display:inline-flex; flex-direction:column; align-items:center; text-decoration:none; border:0; padding:0; line-height:0}
.wordmark.mega img{height:52px; width:auto; display:block; margin:0 auto}
.wordmark.mega .dark{display:none}
@media (prefers-color-scheme: dark){ .wordmark.mega .light{display:none} .wordmark.mega .dark{display:block} }
.wordmark.mega .sub2{font-size:16px; letter-spacing:.32em; text-indent:.32em; color:var(--gray,#B9BCC1); font-weight:500; margin-top:14px; line-height:1}
.intro-clean .claim{margin:26px auto 0; max-width:34ch; font-size:18px; font-weight:300; color:var(--soft,#5B6880); line-height:1.5}
@media(max-width:640px){
  .wordmark.mega img{height:38px}
  .wordmark.mega .sub2{font-size:12.5px; letter-spacing:.26em; text-indent:.26em; margin-top:10px}
  .intro-clean .claim{font-size:16.5px; margin-top:20px}
}

/* Startseite: Situationsfrage größer */
.situation-head h2{font-size:clamp(30px,4.6vw,46px)}
.situation-head{margin-top:44px}

/* Hero der Unterseiten: gleiche Höhe, Bild gleich groß */
.phero{min-height:calc(100svh - 76px); display:flex; align-items:center}
.phero > .wrap{width:100%}
.phero .skyline{width:100%; max-width:470px; height:auto; justify-self:end; align-self:center}
@media(max-width:939px){ .phero{min-height:0; padding:52px 0 56px} .phero .skyline{max-width:380px; margin:10px auto 0} }

/* Knopf zwischen Leistungen und Zusammenarbeit */
.mid-cta{margin-top:38px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px}
.mid-cta span{font-size:15px; color:var(--soft,#5B6880); font-weight:300}


/* Projektabschnitt */
.projekt-split{display:grid; gap:30px; margin-top:26px; align-items:center}
@media(min-width:900px){.projekt-split{grid-template-columns:1fr 1fr; gap:44px}}
.projekt-haupt{margin:0}
.projekt-haupt img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:12px; display:block}
.projekt-haupt figcaption{margin-top:10px; font-size:14px; color:var(--soft,#5B6880); font-weight:300}
.projekt-text p{font-size:17px; color:var(--soft,#5B6880); font-weight:300}
.projekt-text p b{color:var(--ink,#273349); font-weight:600}
.collage{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:30px 0 0; padding:0}
@media(min-width:720px){.collage{grid-template-columns:repeat(4,1fr)}}
.collage img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:10px; display:block}

/* Kontakt: beide Spalten auf gleicher Höhe */
#kontakt .kontakt{align-items:start}
#kontakt .kontakt > div:first-child .kicker{margin-bottom:12px}
#kontakt .kbox{margin-top:0}

/* ===== Anpassungen, Teil 2 ===== */

/* Wortmarke: HOSPITALITY zentriert und unterstrichen */
.wordmark{display:inline-flex; flex-direction:column; align-items:center; text-decoration:none}
.wordmark img{display:block; margin:0 auto}
.wordmark .sub2{display:block; width:100%; text-align:center; text-indent:.24em;
  border-bottom:1px solid currentColor; padding-bottom:6px; opacity:.95}
.wordmark.mega .sub2{text-indent:.32em; padding-bottom:9px}

/* Startseite: Kopfzeile erst beim Scrollen */
body.start-page .site-header{transform:translateY(-100%); transition:transform .28s ease}
body.start-page.scrolled .site-header{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){ body.start-page .site-header{transition:none} }

.claim-sub{margin:16px auto 0; max-width:56ch; font-size:16px; font-weight:300; color:var(--soft,#5B6880); line-height:1.55}
.situation-head h2{line-height:1.12}

/* Kacheln: ausklappbar, ohne Überlappung */
.persona{transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; will-change:transform}
.persona:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,64,123,.14)}
.fits-toggle{display:inline-flex; align-items:center; gap:8px; background:none; border:0; padding:6px 0;
  font:inherit; font-weight:600; color:var(--blue,#00407B); cursor:pointer; text-align:left}
.fits-toggle::after{content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .18s ease}
.fits-toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}
.fits ul{display:grid; grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows .24s ease; margin:0; padding:0}
.fits ul > li{min-height:0}
.fits.open ul{grid-template-rows:1fr; margin-top:8px}
.fits ul li{list-style:disc; margin-left:20px}

/* Kontaktwege untereinander */
.ways.stacked{display:flex; flex-direction:column; align-items:flex-start; gap:3px}

/* Telefonkachel auf der Anfrageseite */
.callcard{margin-top:26px; border:1px solid var(--line,#DDE3EA); border-radius:12px; padding:22px 20px; background:var(--tint,#F4F6F9)}
.cc-head{margin:0 0 4px; font-weight:600; font-size:16.5px}
.cc-sub{margin:0 0 16px; font-size:14.5px; color:var(--soft,#5B6880); font-weight:300}
.cc-person{display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit;
  border:1px solid var(--line,#DDE3EA); border-radius:10px; padding:12px 14px; background:var(--paper,#fff); margin-bottom:10px}
.cc-person:hover{border-color:var(--blue,#00407B)}
.cc-person img{width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none}
.cc-nm{display:block; font-weight:600; font-size:16px}
.cc-role{display:block; font-size:13.5px; color:var(--soft,#5B6880); font-weight:300; margin:1px 0 4px}
.cc-tel{display:block; font-weight:600; color:var(--blue,#00407B); font-size:15.5px}

/* ===== Anpassungen, Teil 3 ===== */

/* Nur eine Linie: die äußere entfällt, die unter HOSPITALITY bleibt */
.wordmark{border-bottom:0 !important; padding-bottom:0 !important}
.wordmark .sub2{border-bottom:1px solid currentColor; padding-bottom:6px}
.wordmark.on-dark-mark .sub2{border-bottom-color:rgba(255,255,255,.45)}

/* Claim: kräftiger, kleiner, sauber umbrochen */
.intro-clean .claim{font-size:21px; font-weight:600; color:var(--ink,#273349); max-width:24ch;
  margin:28px auto 0; line-height:1.3; text-wrap:balance}
.intro-clean .claim-sub{margin:12px auto 0; max-width:52ch; font-size:16px; line-height:1.55; text-wrap:pretty}
@media(max-width:640px){
  .intro-clean .claim{font-size:18.5px; max-width:20ch}
  .intro-clean .claim-sub{font-size:15.5px; max-width:36ch}
}
h1,h2,h3,.sec,.claim,.claim-sub,.lead,.sec-p{text-wrap:pretty}

/* Kacheln: beim Überfahren ausklappen */
.persona{overflow:hidden}
.fits-toggle{display:none}
.fits{border-top:1px solid var(--line,#DDE3EA); margin-top:14px; padding-top:0}
.fits ul{display:grid; grid-template-rows:0fr; overflow:hidden; margin:0; padding:0;
  transition:grid-template-rows .26s ease, margin .26s ease, opacity .2s ease; opacity:0}
.fits ul > li{min-height:0}
.persona:hover .fits ul,
.persona:focus-within .fits ul{grid-template-rows:1fr; margin-top:14px; opacity:1}
.fits::before{content:"Das passt zu Ihnen, wenn …"; display:block; padding-top:14px;
  font-weight:600; font-size:15px; color:var(--blue,#00407B)}
.fits b{display:none}
@media(hover:none){
  .fits ul{grid-template-rows:1fr; opacity:1; margin-top:14px}
}

/* Projektabschnitt: kleinere Bilder und Bildunterschriften */
.projekt-haupt img{max-width:520px; margin-inline:auto}
.projekt-haupt figcaption,.projekt-untertitel,#projekt .note{font-size:13px; color:var(--soft,#5B6880); font-weight:300}
.projekt-innen{display:grid; gap:34px; margin-top:38px; align-items:center}
@media(min-width:900px){.projekt-innen{grid-template-columns:1fr 1fr; gap:44px}}
.projekt-innen .collage{grid-template-columns:repeat(2,1fr); margin:0; gap:10px}
.projekt-innen .collage img{aspect-ratio:1/1; border-radius:8px}

/* Kontakt: Kasten bündig mit den Kontaktzeilen */
#kontakt .kontakt{align-items:stretch}
#kontakt .kbox{margin-top:0; align-self:stretch; display:flex; flex-direction:column}
#kontakt .kbox .btn:last-of-type{margin-top:auto}

/* ===== Anpassungen, Teil 4 ===== */

/* Kopfzeile auf der Startseite wieder dauerhaft */
body.start-page .site-header{transform:none}

/* Claim kleiner */
.intro-clean .claim{font-size:18.5px; max-width:26ch; margin-top:24px}
.intro-clean .claim-sub{font-size:14.5px; max-width:56ch; margin-top:10px; line-height:1.5}
@media(max-width:640px){
  .intro-clean .claim{font-size:17px; max-width:22ch}
  .intro-clean .claim-sub{font-size:13.5px; max-width:38ch}
}

/* Kacheln: kompakt, erst auf Klick weiter aufklappen */
.persona{padding-bottom:18px}
.persona .rolle{margin-top:14px; padding-top:14px; border-top:1px solid var(--line,#DDE3EA);
  font-size:13px; letter-spacing:.1em; font-weight:600; color:var(--blue,#00407B); text-transform:uppercase}
.fits{border-top:0; margin-top:6px; padding-top:0}
.fits::before{content:none}
.fits-toggle{display:inline-flex; align-items:center; gap:8px; background:none; border:0; padding:6px 0;
  font:inherit; font-size:15.5px; font-weight:600; color:var(--blue,#00407B); cursor:pointer; text-align:left}
.fits-toggle::after{content:""; width:8px; height:8px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .18s ease}
.fits-toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(0)}
.fits ul{display:grid; grid-template-rows:0fr; overflow:hidden; opacity:0; margin:0; padding:0;
  transition:grid-template-rows .26s ease, opacity .2s ease, margin .26s ease}
.fits ul > li{min-height:0}
.persona:hover .fits ul, .persona:focus-within .fits ul{grid-template-rows:0fr; opacity:0; margin-top:0}
.fits.open ul{grid-template-rows:1fr !important; opacity:1 !important; margin-top:10px !important}
@media(hover:none){ .fits ul{grid-template-rows:0fr; opacity:0} }

/* ===== Anpassungen, Teil 5 ===== */

/* Keine automatische Silbentrennung, keine einzelnen Wörter am Zeilenende */
body, p, li, dd, dt, .lead, .sec-p, .claim, .claim-sub, .ansatz, .lage{hyphens:none; -webkit-hyphens:none}
h1,h2,h3,h4,.sec,.claim{text-wrap:balance}
p,li,.sec-p,.claim-sub{text-wrap:pretty}
.services li p, .topic p, .persona p{max-width:34ch}

/* Kacheln: gleiche Höhe, Auslöser unten bündig, Aufklappen beim Überfahren */
.personas, ul.personas{align-items:stretch}
.persona{display:flex; flex-direction:column; height:100%; padding-bottom:20px}
.persona > p{margin-bottom:16px}
.persona .rolle{display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:14px;
  border-top:1px solid var(--line,#DDE3EA); font-size:15px; font-weight:500; color:var(--blue,#00407B);
  text-transform:none; letter-spacing:0; text-decoration:none}
.persona .rolle span{transition:transform .16s ease}
.persona .rolle:hover span{transform:translateX(3px)}
.fits{margin-top:12px}
.fits-toggle{padding:0; font-size:15.5px}
.fits ul{transition:grid-template-rows .26s ease, opacity .2s ease, margin .26s ease}
.fits:hover ul, .fits:focus-within ul, .fits.open ul{grid-template-rows:1fr !important; opacity:1 !important; margin-top:12px !important}
.fits ul li{font-size:15px; color:var(--soft,#5B6880); font-weight:300; margin-bottom:4px}
.fits ul li:last-child{margin-bottom:0}

/* ===== Anpassungen, Teil 6 ===== */

/* Kachel endet direkt unter dem Auslöser, gleicher Abstand wie oben */
.persona .rolle{margin-top:14px}
.persona{padding-bottom:22px}
.fits{margin-top:10px; border-top:0}
.fits.open, .fits:hover{padding-bottom:0}

/* Häufige Fragen wie der Ansprechpartner-Abschnitt */
#fragen{background:transparent; color:inherit}
#fragen .kicker{color:var(--blue)}
#fragen h2, #fragen h3, #fragen summary{color:var(--ink)}
#fragen .sec-p, #fragen p{color:var(--soft)}
#fragen details{border-bottom-color:var(--line)}
#fragen summary::after{color:var(--blue)}
#fragen a{color:var(--blue)}

/* ===== Anpassungen, Teil 7 ===== */

/* Kopfbereich der Startseite: Frage links, Aussage und Skyline rechts */
.start{padding-top:34px}
.starthead{display:grid; gap:30px; align-items:center; margin:8px 0 34px; text-align:left}
@media(min-width:960px){.starthead{grid-template-columns:1.05fr .95fr; gap:56px; margin:18px 0 44px}}
.starthead h2{font-size:clamp(30px,4.4vw,46px); line-height:1.1; max-width:15ch; margin:0}
.sh-links p{margin:16px 0 0; color:var(--soft); font-weight:300; font-size:17px; max-width:40ch}
.sh-rechts .claim{margin:0; font-size:19px; font-weight:600; line-height:1.35; max-width:30ch; color:var(--ink)}
.sh-rechts .claim-sub{margin:12px 0 0; font-size:14.5px; font-weight:300; line-height:1.55; color:var(--soft); max-width:52ch}
.sh-skyline{display:block; width:100%; max-width:440px; height:auto; margin:22px 0 0; opacity:.85}
@media (prefers-color-scheme: dark){ .sh-skyline{opacity:.9} }
@media(max-width:959px){ .sh-skyline{max-width:340px; margin-inline:auto} }
@media(max-width:640px){
  .starthead h2{font-size:27px}
  .sh-rechts .claim{font-size:17px}
  .sh-rechts .claim-sub{font-size:13.5px}
}

/* Kachel: unten derselbe Abstand wie oben */
.persona{padding:24px 22px 24px}
.persona .rolle{margin-top:14px; padding-top:14px}
.fits{margin-top:8px}
.fits-toggle{padding:0}

/* ===== Kacheln: endgültige Regelung ===== */
/* Grund für den Leerraum: ein Raster mit 0fr kollabiert nur die erste Zeile.
   Bei mehreren Listenpunkten blieben die übrigen Zeilen stehen. Daher jetzt über die Höhe. */

.persona{padding:24px 22px 24px !important; height:auto !important; overflow:hidden}
.persona .rolle{margin-top:14px !important; padding-top:14px !important}
.persona .fits{margin-top:10px !important; padding-top:0 !important; border-top:0 !important}
.persona .fits-toggle{display:inline-flex !important; padding:0 !important}

.persona .fits ul{
  display:block !important;
  max-height:0 !important;
  opacity:0 !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
  transition:max-height .3s ease, opacity .22s ease, margin-top .3s ease !important;
}
.persona:hover .fits ul,
.persona:focus-within .fits ul,
.persona .fits.open ul{
  max-height:320px !important;
  opacity:1 !important;
  margin-top:12px !important;
}
.persona .fits ul li{list-style:none; position:relative; padding-left:18px; margin:0 0 6px;
  font-size:15px; font-weight:300; color:var(--soft)}
.persona .fits ul li:last-child{margin-bottom:0}
.persona .fits ul li::before{content:"–"; position:absolute; left:0; color:var(--blue)}

@media(hover:none){
  .persona .fits ul{transition:none !important}
  .persona .fits.open ul{max-height:320px !important; opacity:1 !important}
}

/* ===== Anpassungen, Teil 8 ===== */

/* Startseite: Aussage links, Skyline rechts, darunter die Frage */
.start{padding-top:26px}
.starthead{display:grid; gap:24px; align-items:center; margin:0 0 30px; text-align:left}
@media(min-width:960px){.starthead{grid-template-columns:1.1fr .9fr; gap:48px; margin-bottom:34px}}
.sh-skyline{display:block; width:100%; max-width:420px; height:auto; margin:0; justify-self:end; opacity:.85}
@media(max-width:959px){.sh-skyline{max-width:320px; margin-inline:auto}}

/* Frage dicht über den Kacheln */
.situation-head{text-align:left !important; max-width:none !important; margin:0 0 18px !important}
.situation-head h2{font-size:clamp(28px,4.2vw,42px) !important; line-height:1.1; max-width:18ch}
.situation-head p{margin:10px 0 0; max-width:48ch; font-size:16.5px}

/* Sprechblasen: beim Überfahren etwas größer */
.bub{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.bub:hover{transform:translateY(-4px) scale(1.035); box-shadow:0 16px 36px rgba(0,64,123,.24); z-index:5}
@media (prefers-reduced-motion: reduce){ .bub:hover{transform:none} }

/* Was wir konkret übernehmen: kompakter */
#leistungen{padding-top:46px; padding-bottom:46px}
#leistungen .sec-p{margin-bottom:6px}
.services{gap:14px !important}
.services li{padding:16px 18px !important}
.services li h3{font-size:16.5px !important; margin-bottom:4px !important}
.services li p{font-size:14.5px !important; line-height:1.5 !important}
.topics{gap:14px !important}
.topic{padding:16px 18px !important}
.topic h3{font-size:16.5px !important}
.topic p{font-size:14.5px !important; line-height:1.5 !important}
#leistungen .note{font-size:13px !important; margin-top:16px !important}

/* ===== Anpassungen, Teil 9 ===== */

/* Aussage: fett, kleiner. Erklärung darunter deutlich kleiner. */
.starthead{display:block !important; margin:0 0 26px !important; max-width:62ch}
.starthead .claim{margin:0 !important; font-size:17.5px !important; font-weight:600 !important;
  line-height:1.4 !important; color:var(--ink) !important; max-width:44ch}
.starthead .claim-sub{margin:8px 0 0 !important; font-size:13.5px !important; font-weight:300 !important;
  line-height:1.55 !important; color:var(--soft) !important; max-width:58ch}
@media(max-width:640px){
  .starthead .claim{font-size:16px !important}
  .starthead .claim-sub{font-size:13px !important}
}

/* Frage links, Skyline rechts daneben */
.situation-head{display:grid !important; gap:22px; align-items:center; text-align:left !important;
  max-width:none !important; margin:0 0 20px !important}
@media(min-width:900px){.situation-head{grid-template-columns:1.05fr .95fr; gap:44px}}
.situation-head h2{margin:0; max-width:16ch}
.situation-head p{margin:10px 0 0 !important; font-size:16.5px; color:var(--soft); max-width:30ch}
.situation-head .sh-skyline{max-width:420px; justify-self:end; margin:0; opacity:.85}
@media(max-width:899px){.situation-head .sh-skyline{max-width:300px; justify-self:start}}

/* ===== Anpassungen, Teil 10: Kacheln auf den ersten Blick ===== */

.start{padding-top:18px !important; padding-bottom:26px !important}
.starthead{margin:0 0 14px !important}
.situation-head{gap:16px !important; margin:0 0 14px !important}
.situation-head h2{font-size:clamp(26px,3.4vw,36px) !important}
.situation-head p{margin-top:8px !important; font-size:16px !important}
.situation-head .sh-skyline{max-width:360px}
.personas{gap:14px !important}
.persona{padding:20px 20px 20px !important}
.persona h3{font-size:18px !important}
.persona > p{font-size:15px !important}

@media(min-width:900px) and (max-height:900px){
  .start{padding-top:12px !important}
  .situation-head h2{font-size:30px !important}
  .situation-head .sh-skyline{max-width:300px}
  .starthead .claim{font-size:16.5px !important}
  .persona{padding:18px 18px 18px !important}
}

/* ===== Anpassungen, Teil 11: Größen zurück, Skyline groß ===== */

.start{padding-top:22px !important; padding-bottom:30px !important}
.starthead{margin:0 0 20px !important}
.starthead .claim{font-size:18.5px !important}
.starthead .claim-sub{font-size:14px !important}

.situation-head{display:block !important; position:relative; margin:0 0 20px !important; min-height:190px}
.situation-head > div{position:relative; z-index:2; max-width:52%}
.situation-head h2{font-size:clamp(30px,4.2vw,44px) !important; max-width:15ch}
.situation-head p{margin-top:10px !important; font-size:17px !important}

.situation-head .sh-skyline{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:58%; max-width:680px; height:auto; margin:0; z-index:1; opacity:.85; pointer-events:none;
}
@media (prefers-color-scheme: dark){ .situation-head .sh-skyline{opacity:.9} }

@media(max-width:899px){
  .situation-head{min-height:0}
  .situation-head > div{max-width:none}
  .situation-head .sh-skyline{position:static; transform:none; width:100%; max-width:340px; margin:16px 0 0; opacity:.8}
}

.personas{gap:16px !important}
.persona{padding:22px 21px 22px !important}
.persona h3{font-size:18.5px !important}
.persona > p{font-size:15.5px !important}

@media(min-width:900px) and (max-height:900px){
  .situation-head h2{font-size:34px !important}
  .situation-head{min-height:170px}
  .persona{padding:20px 20px 20px !important}
}

/* ===== Anpassungen, Teil 12: Feinjustierung ===== */

/* Skyline etwas kleiner und höher */
.situation-head .sh-skyline{width:53% !important; max-width:645px !important;
  top:50% !important; transform:translateY(calc(-50% - 10px)) !important}

/* Frage größer, Textblock etwas tiefer */
.situation-head > div{padding-top:8px}
.situation-head h2{font-size:clamp(33px,4.6vw,48px) !important; max-width:14ch}
@media(min-width:900px) and (max-height:900px){
  .situation-head h2{font-size:37px !important}
}

/* Kacheln bleiben, wo sie sind: Zugewinn oben wird unten ausgeglichen */
.situation-head{margin-bottom:12px !important}

/* Kein Streifen der nächsten Sektion mehr am unteren Rand */
.start{padding-bottom:72px !important}

/* ===== Anpassungen, Teil 13: zweite Feinjustierung ===== */

/* Skyline nochmals 5 % kleiner und 20 Pixel höher */
.situation-head .sh-skyline{width:50.4% !important; max-width:613px !important;
  transform:translateY(calc(-50% - 30px)) !important}

/* Frage nochmals 10 % größer und 20 Pixel tiefer */
.situation-head > div{padding-top:28px}
.situation-head h2{font-size:clamp(36px,5.1vw,53px) !important; max-width:13ch}
@media(min-width:900px) and (max-height:900px){
  .situation-head h2{font-size:41px !important}
}

/* Kacheln bleiben an Ort und Stelle */
.situation-head{margin-bottom:0 !important}

/* ===== Anpassungen, Teil 14 ===== */

/* Fester Umbruch nach "Situation", kein automatischer Ausgleich */
.situation-head h2{text-wrap:initial !important; max-width:none !important; white-space:normal}
@media(max-width:560px){ .situation-head h2 br{display:none} }

/* Skyline weitere 10 Pixel höher */
.situation-head .sh-skyline{transform:translateY(calc(-50% - 40px)) !important}

/* ===== Anpassungen, Teil 15 ===== */
.situation-head .sh-skyline{transform:translateY(calc(-50% - 45px)) !important}
.personas{margin-top:5px !important}

/* ===== Anpassungen, Teil 16 ===== */
.situation-head .sh-skyline{transform:translateY(calc(-50% - 50px)) !important}
.personas{margin-top:10px !important}

/* ===== Anpassungen, Teil 17 ===== */
.situation-head .sh-skyline{transform:translateY(calc(-50% - 60px)) !important}
.situation-head h2{font-size:clamp(38px,5.4vw,56px) !important}
.situation-head p{font-size:17.8px !important}
@media(min-width:900px) and (max-height:900px){
  .situation-head h2{font-size:43px !important}
}

/* Bildunterschrift unter der Bilderreihe */
.collage-cap{margin:10px 0 0; font-size:13px; color:var(--soft); font-weight:300}

/* Bildunterschrift rechtsbündig unter der Bilderreihe */
.projekt-innen .collage-cap{text-align:right; margin:8px 0 0; padding:0}

/* Bilderreihe und ihre Unterschrift bilden einen Rasterplatz */
.projekt-innen .collage-wrap{display:block; min-width:0}
.projekt-innen .collage{margin:0}
.projekt-innen .collage-cap{margin:10px 0 0; text-align:right; font-size:13px; color:var(--soft); font-weight:300}

/* Hero der Unterseiten: Umbruch nur nach einem Satz */
.phero h1 .satz, .phero .lead .satz{display:block; text-wrap:balance}
.phero h1 .satz + .satz, .phero .lead .satz + .satz{margin-top:2px}
@media(max-width:560px){ .phero h1 .satz, .phero .lead .satz{display:inline} }

/* Hero der Unterseiten: Sätze sollen in eine Zeile passen */
.phero h1{font-size:clamp(27px,3.6vw,40px) !important; max-width:none !important}
.phero h1 .satz{display:block; white-space:nowrap}
.phero .lead .satz{display:block; white-space:nowrap}
.phero .lead{font-size:17px !important; max-width:none !important}
@media(max-width:1100px){
  .phero h1 .satz{white-space:normal}
  .phero .lead .satz{white-space:normal}
}
@media(max-width:560px){
  .phero h1 .satz, .phero .lead .satz{display:inline; white-space:normal}
}

/* Hero der Unterseiten: Skyline liegt hinter dem Text und verschiebt nichts */
.phero > .wrap{position:relative}
.phero .skyline{
  position:absolute !important; right:0; top:50%; transform:translateY(-50%);
  width:62% !important; max-width:760px !important; height:auto; margin:0 !important;
  z-index:0; opacity:.8; pointer-events:none;
}
.phero > .wrap > *:not(.skyline){position:relative; z-index:2}
@media (prefers-color-scheme: dark){ .phero .skyline{opacity:.85} }
@media(max-width:939px){
  .phero .skyline{position:static !important; transform:none; width:100% !important;
    max-width:340px !important; margin:16px auto 0 !important; opacity:.75}
}

/* ===== Anpassungen, Teil 18 ===== */

/* Hero der Unterseiten: Skyline überall gleich groß, gleiche Position, frei im Hintergrund */
.phero > .wrap{position:relative; display:block !important}
.phero .skyline{
  position:absolute !important; right:0 !important; top:50% !important;
  transform:translateY(-50%) !important;
  width:52% !important; max-width:620px !important; min-width:0;
  height:auto !important; margin:0 !important; z-index:0; opacity:.8; pointer-events:none;
}
.phero h1, .phero .lead, .phero .cta, .phero .promise, .phero .back, .phero .eyebrow{position:relative; z-index:2}
.phero h1{max-width:20ch}
.phero .lead{max-width:44ch; font-size:17.5px !important}
.phero .lead .satz{display:inline; white-space:normal}
@media(max-width:939px){
  .phero .skyline{position:static !important; transform:none !important; width:100% !important;
    max-width:320px !important; margin:18px 0 0 !important; opacity:.75}
  .phero h1, .phero .lead{max-width:none}
}

/* Sprechblasen deutlicher hervorheben */
.bub:hover{transform:translateY(-6px) scale(1.06) !important; box-shadow:0 20px 44px rgba(0,64,123,.3) !important}

/* Fußzeile: nur eine Linie unter HOSPITALITY */
footer .wordmark, .site-footer .wordmark{border-bottom:0 !important; padding-bottom:0 !important}
footer .wordmark .sub2, .site-footer .wordmark .sub2{border-bottom:1px solid rgba(255,255,255,.45)}

/* ===== Anpassungen, Teil 19: Hero endgültig ===== */

.phero > .wrap{position:relative; display:block !important}

/* Textblock: so breit wie die längste Überschriftzeile, nie breiter */
.phero .hero-text{position:relative; z-index:2; width:fit-content; max-width:min(60%, 680px)}
.phero .hero-text h1{max-width:none}
.phero .hero-text .lead{max-width:100% !important; font-size:17.5px !important}
.phero .hero-text .lead .satz{display:inline; white-space:normal}

/* Skyline: gleiche Größe und Position auf allen Seiten, frei im Hintergrund */
.phero picture{position:absolute !important; right:0 !important; top:50% !important;
  transform:translateY(-50%) !important; width:46% !important; max-width:560px !important;
  display:block !important; z-index:0; opacity:.8; pointer-events:none; margin:0 !important}
.phero picture img.skyline,
.phero img.skyline{position:static !important; transform:none !important;
  width:100% !important; max-width:none !important; height:auto !important; margin:0 !important; display:block !important}
@media (prefers-color-scheme: dark){ .phero picture{opacity:.85} }

@media(max-width:939px){
  .phero .hero-text{width:auto; max-width:none}
  .phero picture{position:static !important; transform:none !important; width:100% !important;
    max-width:320px !important; margin:18px 0 0 !important; opacity:.75}
}

/* ===== Anpassungen, Teil 20 ===== */

/* Fußzeile: keine Unterstreichungen */
.site-footer a{text-decoration:none !important; border-bottom:0 !important}
.site-footer a:hover{text-decoration:underline !important; text-decoration-color:rgba(255,255,255,.5) !important}
.site-footer .wordmark, .site-footer .wordmark .sub2{border-bottom:0 !important; padding-bottom:0 !important}

/* Skyline: größer, tiefer, zum Text hin ausgeblendet */
.phero picture{
  width:62% !important; max-width:780px !important;
  top:auto !important; bottom:6% !important; transform:none !important;
  opacity:.9 !important;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 18%, #000 46%);
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 18%, #000 46%);
}
@media(max-width:939px){
  .phero picture{position:static !important; width:100% !important; max-width:320px !important;
    margin:18px 0 0 !important; -webkit-mask-image:none; mask-image:none; opacity:.75 !important}
}

/* ===== Nur Mobil: Überschneidungen und fehlende Leerzeichen ===== */

@media(max-width:1023px){
  /* Startseite: Skyline nie hinter dem Text, sondern darunter */
  .situation-head{min-height:0 !important; display:block !important}
  .situation-head > div{max-width:none !important; padding-top:0 !important}
  .situation-head .sh-skyline{
    position:static !important; transform:none !important;
    width:100% !important; max-width:320px !important;
    margin:16px 0 0 !important; opacity:.8 !important;
  }
}

@media(max-width:939px){
  /* Unterseiten: Skyline ebenfalls unter den Text */
  .phero picture{
    position:static !important; transform:none !important; bottom:auto !important;
    width:100% !important; max-width:300px !important; margin:18px 0 0 !important;
    -webkit-mask-image:none !important; mask-image:none !important; opacity:.75 !important;
  }
  .phero .hero-text{width:auto !important; max-width:none !important}
}

@media(max-width:560px){
  /* Leerzeichen zwischen zwei Sätzen, wenn sie in einer Zeile laufen */
  .phero h1 .satz + .satz::before,
  .phero .lead .satz + .satz::before{content:"\00a0"}
}

/* ===== Nur Hellmodus: Skyline sichtbar machen, Flächen leicht blau tönen ===== */
@media (prefers-color-scheme: light){

  /* Kopfbereich der Startseite: sehr blasser Blauverlauf statt reinem Weiß */
  .start{
    background:linear-gradient(175deg, #F7FAFD 0%, #E9F0F8 62%, #DFE9F4 100%);
    border-bottom:1px solid #DCE5EF;
  }

  /* Skyline auf hellem Grund: aus Weiß wird ein gedecktes Blau */
  .situation-head .sh-skyline{
    filter:invert(1) sepia(.35) saturate(1.6) hue-rotate(176deg) brightness(.92);
    opacity:.34 !important;
  }

  /* Kacheln heben sich vom getönten Grund ab */
  .persona{background:#FFFFFF; border-color:#D7E1EC}
  .persona:hover{border-color:var(--blue); box-shadow:0 16px 34px rgba(0,64,123,.16)}

  /* Abschnitte darunter: abwechselnd Weiß und ein Hauch Blau */
  section.alt{background:#F2F6FB}
  .kbox{background:#EEF4FA; border-color:#D9E3EE}
  .projekt-haupt img, .collage img{box-shadow:0 2px 10px rgba(15,34,56,.08)}
}