/* Schriften liegen neben der Seite, damit beim Aufruf nichts an Dritte
   geht. Fehlen die Dateien, greift die Reihe dahinter — Systemschrift. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("/schriften/sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("/schriften/sans-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("/schriften/sans-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("/schriften/sans-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/schriften/mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/schriften/mono-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url("/schriften/mono-600.woff2") format("woff2")}

:root{
  --pine:#20463b; --pine-2:#163027; --pine-3:#2c5f4f; --pine-soft:#dfeae4;
  --paper:#e7eae3; --panel:#fff; --panel-2:#f4f6f2;
  --ink:#18211d; --ink-2:#5c675f; --ink-3:#8a938c;
  --line:#ccd2c9; --line-2:#e3e7e0;
  --ochre:#a2711a; --brick:#9a3a2b;
  --r:3px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:"IBM Plex Sans",system-ui,sans-serif;background:var(--paper);
  color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.15}
h1{font-size:clamp(30px,3.5vw,44px);hyphens:auto;overflow-wrap:break-word}
h2{font-size:clamp(24px,2.9vw,34px)}
h3{font-size:19px}
p{margin:0 0 1em}
a{color:var(--pine-3)}
img{max-width:100%;height:auto;display:block}
.mitte{max-width:1180px;margin:0 auto;padding:0 26px}

/* ---------- Kopfzeile ---------- */
.kopf{background:var(--pine);position:sticky;top:0;z-index:30}
.kopf .mitte{display:flex;align-items:center;gap:24px;height:64px}
.marke{display:block;text-decoration:none;line-height:0}
.marke img{height:34px;width:auto;display:block}
.marke .wort > span{opacity:.62}
.kopf nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.kopf nav a{color:#c6d6cf;text-decoration:none;font-size:15px}
.kopf nav a:hover{color:#fff}
.knopf{
  display:inline-block;background:var(--pine-3);color:#fff;text-decoration:none;
  padding:11px 22px;border-radius:var(--r);font-weight:500;font-size:16px;border:1px solid var(--pine-3);
}
.knopf:hover{background:#37705d;border-color:#37705d}
.knopf.hell{background:#fff;color:var(--pine);border-color:#fff}
.knopf.hell:hover{background:var(--pine-soft);border-color:var(--pine-soft)}
.knopf.leer{background:transparent;color:var(--pine);border-color:var(--line)}
.knopf.leer:hover{background:var(--panel)}
.knopf.klein{padding:7px 15px;font-size:15px}
a:focus-visible,button:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}

/* ---------- Aufmacher ---------- */
.auf{background:var(--pine);color:#e4ece8;padding:66px 0 0;overflow:hidden}
.auf .raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,9fr);gap:56px;align-items:center}
.auf h1{color:#fff;margin-bottom:20px}
.auf .unter{font-size:19px;color:#b9cdc5;max-width:44ch;margin-bottom:28px}
.auf .tun{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.auf .klein{font-size:14.5px;color:#93aca2;margin:18px 0 0}
.schaufenster{
  margin-bottom:-70px;border-radius:5px 0 0 0;overflow:hidden;
  box-shadow:-2px -2px 0 rgba(255,255,255,.14), 0 40px 90px rgba(0,0,0,.4);
  border-left:1px solid rgba(255,255,255,.2);border-top:1px solid rgba(255,255,255,.2);
  width:calc(100% + 120px);
}
@media (max-width:940px){
  .auf .raster{grid-template-columns:1fr;gap:36px}
  .schaufenster{width:100%;margin-bottom:-40px;border-radius:5px}
}

/* ---------- Abschnitte ---------- */
section{padding:88px 0}
.hell{background:var(--panel)}
.kopfzeile{max-width:60ch;margin-bottom:44px}
.kopfzeile p{color:var(--ink-2);font-size:18px;margin:14px 0 0}

/* Wechselnde Reihen: Text und Bild */
.reihe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:48px;align-items:center;margin-bottom:72px}
.reihe:last-child{margin-bottom:0}
.reihe.gedreht > .text{order:2}
.reihe h3{margin-bottom:12px}
.reihe p{color:var(--ink-2);margin-bottom:0;max-width:46ch}
.reihe .bild{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);
  box-shadow:0 14px 34px rgba(24,33,29,.09)}
@media (max-width:860px){
  .reihe{grid-template-columns:1fr;gap:24px;margin-bottom:52px}
  .reihe.gedreht > .text{order:0}
}

/* Südtirol-Liste */
.merkmale{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:0;
  border-top:1px solid var(--line)}
.merkmal{padding:26px 28px 26px 0;border-bottom:1px solid var(--line-2)}
.merkmal h3{font-size:17px;margin-bottom:7px}
.merkmal p{font-size:15.5px;color:var(--ink-2);margin:0;max-width:38ch}

/* ---------- Preise ---------- */
.preise{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px;align-items:start}
.stufe{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px 26px}
.stufe.empfohlen{border-color:var(--pine);border-width:2px;padding:27px 25px 25px;position:relative}
.stufe .fuer{font-size:14.5px;color:var(--ink-2);min-height:44px;margin:8px 0 20px}
.stufe .preis{font-size:38px;font-weight:600;letter-spacing:-.03em}
.stufe .preis span{font-size:16px;font-weight:400;color:var(--ink-2);letter-spacing:0}
.stufe .jahr{font-size:14.5px;color:var(--ink-3);margin:4px 0 22px}
.stufe ul{list-style:none;margin:0 0 24px;padding:0;font-size:15.5px}
.stufe li{padding:7px 0 7px 24px;position:relative;color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.stufe li:last-child{border-bottom:0}
.stufe li::before{content:"";position:absolute;left:3px;top:14px;width:10px;height:5px;
  border-left:2px solid var(--pine-3);border-bottom:2px solid var(--pine-3);
  transform:rotate(-45deg);border-radius:1px}
.stufe .knopf{width:100%;text-align:center}
.hinweismarke{position:absolute;top:-11px;left:25px;background:var(--pine);color:#fff;
  font-size:12.5px;padding:2px 10px;border-radius:9px}

.inallen{margin:34px 0 0;padding:26px 28px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel-2)}
.inallen h3{font-size:17px;margin:0 0 14px}
.inallen ul{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:9px 26px}
.inallen li{position:relative;padding-left:24px;color:var(--ink-2);line-height:1.55}
.inallen li::before{content:"✓";position:absolute;left:0;color:var(--pine);font-weight:600}
@media (max-width:700px){ .inallen{padding:20px} }

.preisfuss{color:var(--ink-3);font-size:14px;margin:18px 0 0;text-align:center}
.preishinweise{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:28px;margin:38px 0 0;padding-top:30px;border-top:1px solid var(--line)}
.preishinweise h3{font-size:16px;margin-bottom:6px}
.preishinweise p{font-size:15px;color:var(--ink-2);margin:0;max-width:34ch}

/* ---------- Vertrauen ---------- */
.punkte{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:34px}
.punkte h3{font-size:17px;margin-bottom:8px}
.punkte p{font-size:15.5px;color:var(--ink-2);margin:0;max-width:36ch}

/* ---------- Fragen ---------- */
.frage{border-bottom:1px solid var(--line);padding:0}
.frage summary{cursor:pointer;padding:20px 0;font-weight:500;font-size:17.5px;list-style:none;
  display:flex;align-items:center;gap:14px}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+";margin-left:auto;color:var(--ink-3);font-size:20px;font-weight:400}
.frage[open] summary::after{content:"–"}
.frage p{color:var(--ink-2);font-size:16px;max-width:66ch;margin:0 0 20px}

/* ---------- Abschluss ---------- */
/* Abschnitt über die Weiterentwicklung — dunkel, damit er sich von den
   hellen Bereichen darüber und darunter absetzt. */
.mehr{background:var(--pine);color:#fff;padding:56px 0}
.mehr h3{font-size:26px;margin:0 0 16px;letter-spacing:-.02em;color:#fff}
.mehr p{max-width:78ch;line-height:1.75;margin:0 0 14px;color:#dfe8e3}
.mehr strong{color:#fff}
.mehr .kleiner{font-size:14.5px;color:#b9cec5}
@media (max-width:700px){ .mehr{padding:40px 0} .mehr h3{font-size:22px} }

.abschluss{background:var(--pine);color:#fff;text-align:center;padding:78px 0}
.abschluss h2{color:#fff;margin-bottom:14px}
.abschluss p{color:#b9cdc5;max-width:46ch;margin:0 auto 28px}

.fuss{background:var(--pine-2);color:#8ea69c;font-size:14.5px;padding:38px 0 44px}
.fuss .mitte{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.fuss a{color:#b9cdc5;text-decoration:none;margin-right:20px}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss .rechts{margin-left:auto;text-align:right;max-width:32ch}

@media (max-width:760px){
  .kopf nav a:not(.knopf){display:none}
  .kopf .mitte{height:58px}
  section{padding:60px 0}
  .auf{padding-top:48px}
  .mitte{padding:0 20px}
  .kopfzeile{margin-bottom:32px}
  .merkmal{padding-right:0}
  .fuss .rechts{margin-left:0;text-align:left}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


.vertrauen{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-size:14px;color:#cfd9d3}
.vertrauen span{white-space:nowrap}
.ausserdem{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 28px}
.ausserdempunkt h4{margin:0 0 4px;font-size:16px}
.ausserdempunkt p{margin:0;color:var(--ink-2,#5c675f);font-size:14.5px;line-height:1.5}
@media(max-width:820px){.ausserdem{grid-template-columns:1fr}}
.wiederholtercta{text-align:center;padding:56px 20px;background:#1f3d32;color:#f2f6f3}
.wiederholtercta h2{color:#fff;margin-bottom:8px}
.wiederholtercta p{color:#cfe0d7;margin:0 0 20px}
.rechnerteaser{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  background:var(--pine-soft);border:1px solid #bcd6c9;border-radius:var(--r);padding:24px 28px;margin:52px 0}
.rechnerteaser h3{margin-bottom:4px}
.rechnerteaser p{margin:0;color:var(--ink-2);max-width:60ch}

/* ===================== Neu: Die Bücher ===================== */
.unter{font-size:19px;color:#d4e1db;max-width:56ch}
.regal{position:relative;display:flex;align-items:flex-end;gap:10px;height:clamp(300px,36vw,440px);padding:0 6px 14px;margin-bottom:56px}
.ruecken{position:relative;flex:1;height:var(--h);background:var(--f);border-radius:6px 6px 3px 3px;color:#fff;text-decoration:none;display:flex;flex-direction:column;align-items:center;padding:16px 0 18px;box-shadow:inset 0 10px 0 -6px rgba(255,255,255,.14),inset 0 -16px 0 -10px rgba(0,0,0,.2),inset 6px 0 0 -3px rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.06);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ruecken::before,.ruecken::after{content:'';position:absolute;left:12%;right:12%;height:2px;background:rgba(255,255,255,.35);border-radius:2px}
.ruecken::before{top:58px}.ruecken::after{bottom:48px}
.ruecken:hover,.ruecken:focus-visible{transform:translateY(-16px)}
.ruecken-emo{font-size:24px;line-height:1;margin-bottom:auto}
.ruecken-name{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:700;font-size:clamp(18px,1.9vw,25px);letter-spacing:.005em;margin:auto 0 18px}
.ruecken-zeile{position:absolute;left:50%;bottom:calc(100% + 26px);transform:translateX(-50%);width:max-content;max-width:250px;background:#fff;color:var(--ink);font-size:13.5px;line-height:1.4;padding:8px 12px;border-radius:var(--r);opacity:0;pointer-events:none;transition:opacity .2s;text-align:center;box-shadow:0 8px 22px rgba(0,0,0,.2)}
.ruecken:hover .ruecken-zeile,.ruecken:focus-visible .ruecken-zeile{opacity:1}
.ruecken:first-child .ruecken-zeile{left:0;transform:none}.ruecken:nth-child(5) .ruecken-zeile{left:auto;right:0;transform:none}
.brett{position:absolute;left:-14px;right:-14px;bottom:0;height:14px;background:#4c6f63;border-radius:2px;box-shadow:0 10px 20px rgba(0,0,0,.25)}
@media (max-width:940px){.regal{height:250px;gap:7px;margin-bottom:40px}.ruecken-emo{font-size:18px}.ruecken::before{top:44px}.ruecken-zeile{display:none}}
/* Bücher-Abschnitte */
.buch .reihe{margin-bottom:0;grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr)}
@media (max-width:940px){.buch .reihe{grid-template-columns:1fr}}
.buchtext{border-left:4px solid var(--f);padding-left:24px}
.buchtext h2{color:var(--f);display:flex;align-items:center;gap:10px}
.buchzeile{font-size:20px;line-height:1.4;margin:10px 0 16px;color:var(--ink)}
.bm-punkte{list-style:none;padding:0;margin:0 0 16px}
.bm-punkte li{position:relative;padding:8px 0 8px 28px;border-bottom:1px solid var(--line-2);font-size:16px}
.bm-punkte li::before{content:'✓';position:absolute;left:2px;top:8px;color:var(--f);font-weight:700}
.buchpreis{font-size:15px;color:var(--ink-2);background:var(--fh);padding:10px 14px;border-radius:var(--r);margin:0 0 18px}
.knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.knopf.farbe{background:var(--f);border-color:var(--f);color:#fff}.knopf.farbe:hover{filter:brightness(1.1)}
.knopf.rand{background:transparent;border-color:var(--f);color:var(--f)}.knopf.rand:hover{background:var(--panel)}
.bildpaar{position:relative;margin:0 0 34px}
.reihe .bild.bildpaar{border:0;background:none;overflow:visible}
.bildpaar .gross{border:1px solid var(--line);border-radius:5px;box-shadow:0 22px 46px -24px rgba(24,33,29,.4);background:#fff}
.bildpaar .handy{position:absolute;right:-12px;bottom:-34px;width:25%;min-width:104px;border-radius:24px;border:6px solid #1b2320;background:#1b2320;box-shadow:0 18px 38px -12px rgba(24,33,29,.5)}
.reihe.gedreht .bildpaar .handy{right:auto;left:-12px}
@media (max-width:940px){.bildpaar .handy{right:6px}.reihe.gedreht .bildpaar .handy{left:6px}}
/* Konto-Band */
.band{background:var(--pine);color:#dfe8e3;padding:88px 0}
.band h2{color:#fff}.band .kopfzeile p{color:#c6d6cf}
.vorteile{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:0}
.vorteile div{border-top:2px solid #3d6457;padding-top:16px}
.vorteile dt{font-weight:600;font-size:18px;color:#fff;margin-bottom:6px}
.vorteile dd{margin:0;color:#c6d6cf;font-size:15.5px}
@media (max-width:860px){.vorteile{grid-template-columns:1fr 1fr}}@media (max-width:520px){.vorteile{grid-template-columns:1fr}}
/* Preise als Übersicht */
.zeitwahl{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px;margin:0 0 18px}
.zeitwahl button{border:0;background:transparent;font:inherit;font-size:15px;font-weight:500;color:var(--ink-2);padding:8px 16px;border-radius:999px;cursor:pointer}
.zeitwahl button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.tabellenrahmen{background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden}
table.matrix{width:100%;border-collapse:collapse;font-size:15.5px}
.matrix th,.matrix td{padding:16px 14px;text-align:center;border-bottom:1px solid var(--line-2);vertical-align:middle}
.matrix thead th{font-size:14px;font-weight:500;color:var(--ink-2);background:var(--panel-2)}
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{border-bottom:0}
.matrix tbody th{text-align:left;width:22%}.matrix tbody th b{font-size:18px;display:block}.matrix tbody th small{color:var(--ink-2);font-weight:400;font-size:13.5px;display:block}
.matrix td.preis{white-space:nowrap}.matrix td.preis b{font-family:"IBM Plex Mono",monospace;font-size:22px;font-weight:600;display:block}.matrix td.preis span{font-size:13px;color:var(--ink-2)}
.matrix .haken{color:#2c7a52;font-weight:700;font-size:20px}.matrix td.nein{color:#a6aea8}
.matrix tr.hervor{background:#f1f7f3}.matrix tr.hervor th small::after{content:' Passt zu diesem Buch.';color:#2c7a52;font-weight:500}
.unterhalb{color:var(--ink-2);font-size:14.5px;margin-top:14px}
@media (max-width:760px){.matrix thead{display:none}.matrix,.matrix tbody,.matrix tr,.matrix th,.matrix td{display:block;width:100%}.matrix tr{border-bottom:1px solid var(--line);padding:14px 16px}.matrix tbody tr:last-child{border-bottom:0}.matrix th,.matrix td{border:0;padding:4px 0;text-align:left}.matrix tbody th{width:auto}.matrix td[data-titel]{display:flex;justify-content:space-between;gap:12px;font-size:14.5px}.matrix td[data-titel]::before{content:attr(data-titel);color:var(--ink-2)}.matrix td.preis b{display:inline;margin-right:6px}}
/* Buchseite */
.brotkrumen-hell{font-size:14px;color:#c6d6cf;margin-bottom:26px}.brotkrumen-hell a{color:#c6d6cf;text-decoration:none}.brotkrumen-hell a:hover{color:#fff}
.andere{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.anderes{display:flex;flex-direction:column;gap:4px;text-decoration:none;background:#fff;border:1px solid var(--line);border-left:5px solid var(--f);border-radius:var(--r);padding:16px 18px;color:var(--ink)}
.anderes b{font-size:17px;color:var(--f)}.anderes span{font-size:14.5px;color:var(--ink-2);line-height:1.45}.anderes:hover{border-color:var(--f)}
@media (max-width:900px){.andere{grid-template-columns:1fr 1fr}}@media (max-width:520px){.andere{grid-template-columns:1fr}}
.reihe .bild.handybild{border:0;background:none;box-shadow:none;overflow:visible;display:flex;justify-content:center}
.reihe .bild.handybild img{max-width:300px;border-radius:26px;border:6px solid #1b2320;background:#1b2320;box-shadow:0 18px 38px -12px rgba(24,33,29,.5)}
.hinweisband{background:var(--pine-soft);border-bottom:1px solid #bcd6c9;padding:14px 0;font-size:15.5px}
.hinweisband .mitte{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* Bildergalerie je Buch */
.galerie-abschnitt{background:linear-gradient(180deg,#f7f5ef 0%,#fff 100%)}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;margin-top:8px}
.galerie figure,.galerie-handy figure{margin:0}
.galerie a.gal,.galerie-handy a.gal{display:block;border-radius:12px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 30px rgba(24,33,29,.10);cursor:zoom-in;transition:transform .2s ease,box-shadow .2s ease;background:#fff}
.galerie a.gal:hover,.galerie-handy a.gal:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(24,33,29,.16)}
.galerie img,.galerie-handy img{display:block;width:100%;height:auto}
.galerie figcaption,.galerie-handy figcaption{font-size:14px;color:#4a564f;margin-top:9px;line-height:1.35}
.galerie-handy-titel{margin:44px 0 14px;font-size:20px}
.galerie-handy{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:22px}
.galerie-handy a.gal{border-radius:22px;border:6px solid #1c2420}
@media (max-width:760px){.galerie{grid-template-columns:1fr}.galerie-handy{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.galerie-handy figure{flex:0 0 62%;scroll-snap-align:start}}
.galerie-tun{text-align:center;margin-top:40px}.galerie-tun .knopf{display:inline-block;width:auto;padding:14px 26px;font-size:17px}
.lightbox{position:fixed;inset:0;background:rgba(10,15,12,.9);z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}