/* AMSOC Übergangsseite · Look 1:1 nach der bisherigen Startseite (Kadence, Stand 24.09.2026).
   Werte aus der Kadence-Palette und dem Original-Screenshot. */
:root{
  --orange:#ff8501; --rot:#ff0202; --gelb:#fed100; --text:#111213;
  --kasten:#f5f7fa;
  --breite:1290px; --rand:1.5rem;
  --schrift:"Trebuchet MS", Helvetica, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--schrift);font-size:17px;line-height:1.35;color:var(--text);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible{outline:2px solid var(--text);outline-offset:2px}
p{margin:0 0 .9em}
h1{font-size:32px;line-height:1.25;font-weight:700;color:var(--orange);margin:0 0 1.4rem}
h2{font-size:28px;line-height:1.3;font-weight:700;margin:0 0 .6rem}
.rahmen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
section{scroll-margin-top:20px}

/* Kopf */
.kopf{background:#fff}
.kopf__innen{min-height:170px;display:flex;align-items:center;gap:1.5rem;padding:0 28px}
.logo img{width:412px;max-width:40vw}
.menue{flex:1;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.8rem;padding:0 1rem}
.menue a{text-decoration:none;text-transform:uppercase;font-weight:700;font-size:17px;letter-spacing:.01em}
.menue a:hover{color:var(--orange)}
.kopf__rechts{display:flex;align-items:center;gap:2rem}
.linkedin{display:flex;color:var(--text)}
.knopf-spenden{display:inline-block;background:var(--gelb);color:#fff;text-decoration:none;text-transform:uppercase;font-weight:700;font-size:20px;letter-spacing:.06em;padding:14px 29px}
.knopf-spenden:hover{background:var(--orange)}

/* Bühne */
.buehne{background:var(--gelb);min-height:400px;display:flex;justify-content:center;align-items:flex-end;overflow:hidden}
.buehne img{width:520px;max-width:80%;margin-bottom:-16px}

/* Hinweis im Stil des Feedback-Kastens */
.infokasten{background:var(--kasten);text-align:center;padding:28px 40px 30px;margin:60px 0}
.infokasten h2{color:var(--gelb);font-size:28px}
.infokasten p{margin-bottom:.4em}
.infokasten a{color:var(--text)}
.infokasten--oben{margin-top:60px;margin-bottom:0}
.infokasten h3{font-size:18px;margin:1.4em 0 .3em}
.infokasten__hinweis{margin-top:1.8em}
.infokasten--feedback .spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left;margin-top:1em}
.spalten > div{background:#fff;padding:22px 24px 12px}
.spalten__lang{grid-row:span 2}
.spalten__breit{grid-column:span 2}
.infokasten--feedback h3{margin:0 0 18px;padding-bottom:12px;text-align:center;font-size:19px;line-height:1.3;position:relative}
.infokasten--feedback h3::after{content:"";position:absolute;left:50%;bottom:0;width:48px;height:3px;margin-left:-24px;background:var(--gelb)}
.infokasten--feedback .spalten p{margin-bottom:.9em}
.anonym{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding-bottom:12px}
.anonym p{margin:0!important}
.spalten a[href^="tel:"]{white-space:nowrap}
.anonym address{font-style:normal;font-weight:bold;line-height:1.5;padding-left:48px}
.spalten > div:not(.spalten__breit) h3{min-height:calc(2.6em + 12px);display:flex;align-items:flex-end;justify-content:center}
.notruf{list-style:none;padding:0;margin:1em 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.notruf li{background:#fff;padding:16px 12px;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.notruf__name{font-size:15px;line-height:1.3}
.notruf__nr{font-size:20px;font-weight:bold;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.notruf__nr:hover,.notruf__nr:focus-visible{text-decoration:underline}
.notruf__icon{flex:none}

/* Einstieg */
.einstieg{display:grid;grid-template-columns:1fr 480px;gap:36px;align-items:start;padding:60px 0 0}
.einstieg p{font-size:17px;line-height:1.3}
.einstieg img{width:100%;aspect-ratio:480/358;object-fit:cover}

/* Film */
.film{display:flex;justify-content:center;padding-top:68px}
.film video{width:848px;max-width:100%;height:auto;background:#000}

/* Karten */
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:64px;padding:68px 0 0}
.karte{display:flex;flex-direction:column;scroll-margin-top:20px}
.karte h2{margin:0;height:70px;display:flex;align-items:center;justify-content:center;color:#fff;text-transform:uppercase;font-size:20px;letter-spacing:.01em}
.karte--gelb h2{background:var(--gelb)}
.karte--orange h2{background:var(--orange)}
.karte--rot h2{background:var(--rot)}
.karte__text{padding:32px 16px 0;flex:1}
.karte__text p{line-height:1.3}
.pfeile{align-self:flex-end;text-decoration:none;font-weight:700;font-size:30px;letter-spacing:.08em;padding:0 16px 0 0;line-height:1}
.karte--gelb .pfeile{color:var(--gelb)}
.karte--orange .pfeile{color:var(--orange)}
.karte--rot .pfeile{color:var(--rot)}
.pfeile:hover{opacity:.75}
.karten + .infokasten{margin-top:120px}
.karten + .termine{padding-top:80px}

/* Termine */
.termine{padding:0}
.termine__titel{font-size:96px;line-height:1;color:var(--gelb);text-transform:uppercase;margin:40px 0 .6rem;letter-spacing:-.01em}
.termine ul{list-style:none;padding:0;margin:0 0 1.2rem}
.termine li{display:flex;gap:26px;margin-bottom:22px;font-family:Helvetica, Arial, sans-serif}
.datum{display:flex;flex-direction:column;align-items:center;width:46px;padding-top:6px}
.monat{font-size:11px;text-transform:uppercase;color:#555}
.tag{font-size:22px;color:var(--gelb);font-weight:700;line-height:1.2}
.zeit{display:block;font-size:21px}
.titel{display:block;font-size:21px;font-weight:700;color:var(--gelb);margin-top:6px}
.termine > p{font-size:16px}

/* Unterstützer */
.unterstuetzer{text-align:center;padding:60px 0 100px}
.unterstuetzer h2{text-transform:uppercase;font-size:28px;margin-bottom:24px}
.logos{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:30px 70px}
.logos img{height:auto;max-height:140px;max-width:150px;object-fit:contain}

/* Fuß */
.fuss{background:var(--gelb);scroll-margin-top:0}
.fuss__innen{max-width:var(--breite);margin:0 auto;padding:40px var(--rand) 30px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;font-size:17px}
.fuss__logo{width:592px;max-width:100%;margin-bottom:34px}
.fuss a{text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss__linkedin{display:inline-flex;align-items:center;gap:.5rem}
.fuss__menue{display:flex;flex-direction:column;padding-top:16px;line-height:1.35}
.fuss__menue .abstand{height:70px}
.fuss__menue a{margin-bottom:4px}
#spendenkonto{padding-top:16px}
#spendenkonto p{margin-bottom:1.1em}
.fuss__spenden{display:block;background:var(--orange);color:#fff;text-align:center;text-transform:uppercase;font-weight:700;letter-spacing:.06em;padding:12px;margin-top:6px}
.fuss__spenden:hover{text-decoration:none!important;opacity:.9}
.copyright{background:#fff;text-align:center;font-size:14px;margin:0;padding:18px var(--rand)}
.copyright a{text-decoration:underline}

/* Rechtstexte */
.recht{padding-top:50px;padding-bottom:70px;max-width:900px}
.recht h1{font-size:32px}
.recht h2{font-size:22px;color:var(--orange);margin-top:1.8rem}
.recht h3{font-size:18px;margin:1.3rem 0 .4rem}
.recht p,.recht li{line-height:1.45}
.recht--zweispaltig{max-width:var(--breite);column-count:2;column-gap:80px}
.recht--zweispaltig h1{column-span:all;margin-bottom:2rem}
.recht--zweispaltig p,.recht--zweispaltig h2{break-inside:avoid}
.recht--zweispaltig h2{margin-top:0;break-after:avoid}

/* Menü-Knopf (nur mobil sichtbar) */
.menue-knopf{display:none;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
.menue-knopf span{display:block;width:26px;height:3px;background:var(--text);margin:5px 0;border-radius:2px}

/* Tablet */
@media (max-width:1100px){
  .infokasten--feedback .spalten{grid-template-columns:1fr 1fr}
  .kopf__innen{flex-wrap:wrap;justify-content:space-between;padding:16px 20px;min-height:0}
  .logo img{max-width:60vw}
  .menue{order:3;flex-basis:100%;justify-content:flex-start;padding:0 0 6px}
  .einstieg,.karten,.termine{padding-left:0;padding-right:0}
  .einstieg{grid-template-columns:1fr 1fr}
  .karten{gap:32px}
  .fuss__innen{grid-template-columns:1fr 1fr}
  .fuss__adresse{grid-column:1 / -1}
}
/* Handy */
@media (max-width:700px){
  body{font-size:16px}
  h1{font-size:26px}
  .kopf__innen{flex-wrap:wrap;padding:14px 20px}
  .logo img{max-width:70vw;width:260px}
  .menue-knopf{display:block}
  .menue,.kopf__rechts{display:none}
  .kopf.offen .menue{display:flex;flex-direction:column;gap:0;order:3;flex-basis:100%;padding:8px 0}
  .kopf.offen .menue a{padding:10px 0;border-top:1px solid #eee;font-size:16px}
  .kopf.offen .kopf__rechts{display:flex;order:4;flex-basis:100%;justify-content:space-between;padding:6px 0 4px}
  .knopf-spenden{font-size:16px;padding:10px 18px}
  .buehne{min-height:118px}
  .buehne img{width:145px;margin-bottom:-6px}
  .infokasten{padding:22px 18px;margin:40px 0}
  .infokasten h2{font-size:22px}
  .einstieg{grid-template-columns:1fr;padding-top:40px}
  .film{padding-top:40px}
  .karten{grid-template-columns:1fr;padding-top:40px;gap:40px}
  .karte__text{padding-top:20px}
  .karten + .infokasten{margin-top:60px}
  .karten + .termine{padding-top:30px}
  .infokasten--feedback .spalten{grid-template-columns:1fr;gap:10px}
  .spalten__lang{grid-row:auto}
  .spalten__breit{grid-column:auto}
  .anonym{grid-template-columns:1fr;gap:14px}
  .anonym address{padding-left:0}
  .kontakt--ohne-name{padding-top:0}
  .spalten > div:not(.spalten__breit) h3{min-height:0}
  .notruf{grid-template-columns:1fr 1fr;gap:10px}
  .notruf__nr{font-size:17px}
  .termine__titel{font-size:60px}
  .zeit,.titel{font-size:18px}
  .unterstuetzer{padding-bottom:60px}
  .logos{gap:24px 36px}
  .logos img{max-width:110px;max-height:90px}
  .fuss__innen{grid-template-columns:1fr}
  .fuss__menue .abstand{height:20px}
  .recht--zweispaltig{column-count:1}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Kontakt mit Symbol statt Unterstrich (Feedback-Kacheln) */
.kontakt strong{display:block;margin-bottom:2px}
/* ohne Namenszeile eine Zeile tiefer, damit Telefon/Mail auf Hoehe der Nachbarkachel stehen */
.kontakt--ohne-name{padding-top:calc(1lh + 2px)}
a.ico{display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap}
a.ico:hover,a.ico:focus-visible{text-decoration:underline}
a.ico::before{content:"";flex:none;width:15px;height:15px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.ico--tel{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.6a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E")}
.ico--mail{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E")}