/* ===== CareKudos Ressourcen-Bereich (19.10.2026) =====
   Eigener Akzent in Teal und hellem Gruen, damit sich /resources/ vom Blau und Weiss der uebrigen Seiten abhebt.
   Wird nur auf der Uebersicht und den Leadmagnet-Seiten unter /resources/ geladen (nach site.css).
   Kontraste nach WCAG AA, nachgerechnet: Teal #136A83 auf Weiss 6,2:1, auf Mint 5,5:1, auf Mint-2 5,0:1;
   Weiss auf Teal 6,2:1; Grau #5A6174 auf Mint 5,5:1; Fehlerrot #9B2C2C auf Weiss 7,5:1.
   Leaf #2A9D6E (3,4:1) nur fuer Schmuck wie Linien und Flaechen, nie fuer Text. */
:root{
  --res-teal:var(--teal);        /* #136A83 aus tokens.css */
  --res-teal-tief:#0E5468;
  --res-teal-dunkel:#0B4A5C;
  --res-mint:#E8F5F1;
  --res-mint-hell:#F1FAF7;
  --res-mint-2:#D4EDE5;
  --res-line:#B7D7CA;            /* Kartenkante im Ressourcen-Bereich: 1,55:1 auf Weiss, 1,38:1 auf Mint (so stark wie --card-line, aber im Mint-Ton) */
  --res-leaf:var(--leaf);        /* #2A9D6E aus tokens.css */
  --res-grau:#5A6174;
  --res-fehler:#9B2C2C;
  --res-verlauf:linear-gradient(135deg,#86D9BC,#2A9D6E);
}

/* Bereich: gruenlicher Seitenkopf, gruener Strich unter dem Schluesselwort, Menuepunkt "Resources" bleibt markiert */
.ressourcen-bereich .seite-hero{background:radial-gradient(900px 440px at 90% -10%,rgba(42,157,110,.13),transparent 62%),linear-gradient(180deg,var(--res-mint),#fff 90%)}
.res-uebersicht .seite-hero{background:radial-gradient(900px 440px at 90% -10%,rgba(42,157,110,.13),transparent 62%),linear-gradient(180deg,var(--res-mint-hell),var(--res-mint))}
.ressourcen-bereich .strich::after{background:var(--res-verlauf)}
.nav a[aria-current="true"],.nav__gruppe:has(a[aria-current]) .nav__knopf{opacity:1;background:rgba(4,5,80,.07)}
.res-abschnitt--mint{background:var(--res-mint);border-top:1px solid var(--res-line)}

/* Knopf in Teal (gleiches Verhalten wie der Navy-Knopf) */
.knopf--teal{background:var(--res-teal);color:#fff;box-shadow:0 10px 26px rgba(19,106,131,.28)}
.knopf--teal:hover{background:var(--res-teal-tief);box-shadow:0 16px 38px rgba(19,106,131,.34)}
.knopf--teal::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 48%,transparent 66%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.knopf--teal:hover::after{transform:translateX(120%)}

/* Formate als kleine Marken (PDF, Audio, Excel) */
.res-formate{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:22px 0 0;padding:0}
.res-format{display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 9px;border-radius:var(--r-pill);background:var(--res-mint-2);color:var(--res-teal-tief);font-family:var(--mono);font-size:11.5px;font-weight:500;line-height:1;letter-spacing:.08em;text-transform:uppercase}
.res-format svg{width:14px;height:14px;flex:none}

/* ---------- Uebersicht /resources/ ---------- */
.res-sprung{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.res-sprung a{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-pill);background:#fff;box-shadow:inset 0 0 0 1.5px var(--res-mint-2);font-weight:700;font-size:15px;color:var(--res-teal-tief);transition:box-shadow var(--t-fast),transform var(--t-fast) var(--ease)}
.res-sprung a::after{content:"↓";font-size:14px}
.res-sprung a:hover{box-shadow:inset 0 0 0 1.5px var(--res-teal);transform:translateY(-1px)}
#guides,#blog{scroll-margin-top:calc(var(--kopf) - 40px)}
.res-einleitung{max-width:640px;margin-top:12px;font-size:clamp(17px,1.35vw,19px);color:var(--res-grau)}

.res-guides{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:34px}
.res-guide{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-xl);background:#fff;box-shadow:0 0 0 1px var(--res-line),var(--card-lift);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.res-guide__bild{position:relative;display:block;height:clamp(230px,21vw,290px);overflow:hidden;background:radial-gradient(420px 220px at 50% 110%,rgba(42,157,110,.2),transparent 70%),linear-gradient(160deg,var(--res-mint-hell),var(--res-mint-2))}
.res-guide__bild img{position:absolute;left:50%;bottom:-8%;height:96%;width:auto;border-radius:5px;background:#fff;box-shadow:0 0 0 1px rgba(4,5,80,.05),var(--shadow-2);transform:translateX(-50%) rotate(-3deg);transition:transform .6s var(--ease)}
.res-guide__bild--quer img{top:50%;bottom:auto;width:min(76%,470px);height:auto;transform:translate(-50%,-50%) rotate(-2deg)}
.res-guide__inhalt{display:flex;flex-direction:column;gap:9px;flex:1;padding:22px 24px 24px}
.res-guide__art{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--res-teal)}
.res-guide h3{font-size:clamp(19px,1.45vw,22px);line-height:1.18;letter-spacing:-.02em;color:var(--navy)}
.res-guide p{font-size:15.5px;line-height:1.5;color:var(--res-grau)}
.res-guide .res-formate{margin-top:auto;padding-top:8px}
.res-guide .link-pfeil{margin-top:14px;color:var(--res-teal-tief)}
.res-guide--breit{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.res-guide--breit .res-guide__bild{height:auto;min-height:clamp(300px,28vw,400px)}
.res-guide--breit .res-guide__inhalt{justify-content:center;padding:clamp(26px,3vw,44px)}
.res-guide--breit h3{font-size:clamp(26px,2.4vw,36px);line-height:1.08;letter-spacing:-.03em}
.res-guide--breit p{font-size:16.5px}
.res-guide--breit .res-formate{margin-top:6px}
@media (hover:hover) and (pointer:fine){
  .res-guide:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--res-teal),var(--shadow-2)}
  .res-guide:hover .res-guide__bild img{transform:translateX(-50%) translateY(-10px) rotate(-1deg)}
  .res-guide:hover .res-guide__bild--quer img{transform:translate(-50%,-53%) rotate(0deg)}
}
.res-abschnitt--mint .res-karte{box-shadow:0 0 0 1px var(--res-line),var(--card-lift)}
.res-abschnitt--mint .res-karte .art,.res-uebersicht #blog .res-karte .art{color:var(--res-teal)}
.res-abschnitt--mint .res-karte .link-pfeil,.res-uebersicht #blog .res-karte .link-pfeil{color:var(--res-teal-tief)}

/* ---------- Leadmagnet-Seiten /resources/<slug>/ ---------- */
.res-zurueck{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;font-size:15px;font-weight:700;color:var(--res-teal)}
.res-zurueck span{transition:transform var(--t-fast) var(--ease)}
.res-zurueck:hover{color:var(--res-teal-tief)}
.res-zurueck:hover span{transform:translateX(-3px)}
.res-hero h1{font-size:clamp(36px,calc(3.5vw*var(--dichte)),56px);line-height:1.04}
.res-hero .lead{max-width:540px}

/* Titelstapel: Hauptcover vorn, zwei Blaetter aus dem Paket dahinter */
.res-stapel{position:relative;height:clamp(250px,29vw,410px);max-width:520px;margin-top:30px}
.res-stapel img{position:absolute;bottom:0;width:auto;border-radius:5px;background:#fff;box-shadow:0 0 0 1px rgba(4,5,80,.06),var(--shadow-2);transition:transform .5s var(--ease)}
.res-stapel .res-stapel__vorn{left:0;height:94%;z-index:3;transform:rotate(-3deg);animation:res-faechern .9s var(--ease) .15s backwards}
.res-stapel .res-stapel__mitte{left:30%;bottom:3%;height:84%;z-index:2;transform:rotate(3deg);animation:res-faechern .9s var(--ease) .3s backwards}
.res-stapel .res-stapel__hinten{left:55%;bottom:6%;height:74%;z-index:1;transform:rotate(8deg);animation:res-faechern .9s var(--ease) .45s backwards}
@keyframes res-faechern{from{opacity:0;transform:translateX(-22%) rotate(-3deg)}}
@media (hover:hover) and (pointer:fine){
  .res-stapel:hover .res-stapel__vorn{transform:rotate(-5deg) translate(-6px,-6px)}
  .res-stapel:hover .res-stapel__hinten{transform:rotate(11deg) translate(10px,2px)}
}

/* Formular */
.res-formular{scroll-margin-top:calc(var(--kopf) + 16px)}
.res-formular .etikett{margin-bottom:10px}
.res-formular h2,.res-danke h2{line-height:1.12}
.res-formular .feld input:focus,.res-formular .feld select:focus{border-color:var(--res-teal);box-shadow:0 0 0 4px rgba(19,106,131,.14)}
.res-formular .einwilligung input{accent-color:var(--res-teal)}
.res-formular .klein a{color:var(--res-teal-tief);text-decoration:underline;text-underline-offset:2px}
.feld__hinweis{margin:0;font-size:13.5px;line-height:1.4;font-weight:600;color:var(--res-fehler)}
.feld__hinweis:empty{display:none}
.feld input[aria-invalid="true"]{border-color:var(--res-fehler)}
.feld input[aria-invalid="true"]:focus{border-color:var(--res-fehler);box-shadow:0 0 0 4px rgba(155,44,44,.12)}

/* Danke-Box mit allen Dateien */
.res-danke{padding:22px 0 4px;text-align:left}
.res-danke .schluss__stern,.res-danke h2,.res-danke>.klein{text-align:center}
.res-dateien{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.res-datei{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 16px 12px 12px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--res-mint-2);color:var(--navy);transition:background var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast) var(--ease)}
.res-datei:hover{background:var(--res-mint-hell);box-shadow:inset 0 0 0 1.5px var(--res-teal)}
.res-datei:active{transform:scale(.985)}
.res-datei__symbol{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--res-mint);color:var(--res-teal)}
.res-datei__symbol svg{width:20px;height:20px}
.res-datei b{display:block;font-size:15.5px;line-height:1.3}
.res-datei small{display:block;margin-top:3px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--res-grau)}
.res-datei__pfeil{font-size:18px;font-weight:700;color:var(--res-teal)}
.res-datei--haupt{background:var(--res-teal);box-shadow:0 10px 26px rgba(19,106,131,.26);color:#fff}
.res-datei--haupt:hover{background:var(--res-teal-tief);box-shadow:0 14px 32px rgba(19,106,131,.32)}
.res-datei--haupt small{color:rgba(255,255,255,.86)}
.res-datei--haupt .res-datei__symbol{background:rgba(255,255,255,.16);color:#fff}
.res-datei--haupt .res-datei__pfeil{color:#fff}
.res-hoeren{margin-top:16px;padding:14px;border-radius:16px;background:var(--res-mint)}
.res-hoeren p{font-size:13.5px;font-weight:700;color:var(--res-teal-tief)}
.res-hoeren audio{display:block;width:100%;margin-top:8px}

/* Text der alten Seite, daneben die Inhaltsliste mit Knopf */
.res-text{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:start}
.res-text h2{font-size:clamp(28px,calc(2.7vw*var(--dichte)),42px);line-height:1.08;letter-spacing:-.03em}
.res-text p:not(.etikett){margin-top:18px;max-width:640px;font-size:18px;line-height:1.65}
.res-text p a,.res-text li a{color:var(--res-teal-tief);text-decoration:underline;text-underline-offset:3px} /* Links im Text sichtbar machen (21.10.2026) */
.res-text .res-text__stark{font-weight:700;color:var(--navy)}
.res-text h3{margin-top:36px;font-size:22px;letter-spacing:-.02em}
.res-punkte{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;counter-reset:punkt}
.res-punkte li{counter-increment:punkt;display:grid;grid-template-columns:42px minmax(0,1fr);gap:16px;align-items:start;padding:18px 20px;border-radius:var(--r-l);background:#fff;box-shadow:var(--card-edge)}
.res-punkte li::before{content:counter(punkt,decimal-leading-zero);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--res-mint);color:var(--res-teal);font-family:var(--mono);font-size:13px;font-weight:500}
.res-punkte b{display:block;font-size:18px;line-height:1.3;color:var(--navy)}
.res-punkte span{display:block;margin-top:4px;font-size:16px;line-height:1.5;color:var(--res-grau)}
.res-aside{position:sticky;top:calc(var(--kopf) + 24px);padding:clamp(24px,3vw,34px);border-radius:var(--r-xl);background:var(--res-mint);box-shadow:inset 0 0 0 1px var(--res-line)}
.res-aside h3{font-size:21px;line-height:1.25;letter-spacing:-.02em}
.res-aside .haken-liste{margin-top:18px}
.res-aside .haken-liste li{font-size:16px;color:var(--graphite)}
.res-aside .haken-liste li::before{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.4' fill='none' stroke='%23136A83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.res-aside .knopf{width:100%;justify-content:center;margin-top:26px}

/* Alle Dateien des Pakets als Kacheln */
.res-paket{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.res-paket>li{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-l);background:#fff;box-shadow:0 0 0 1px var(--res-line),var(--card-lift)}
.res-paket__bild{position:relative;display:block;aspect-ratio:4/3.3;overflow:hidden;background:linear-gradient(160deg,var(--res-mint-hell),var(--res-mint-2))}
.res-paket__bild img{position:absolute;left:50%;top:10%;height:82%;width:auto;border-radius:4px;background:#fff;box-shadow:0 0 0 1px rgba(4,5,80,.05),var(--shadow-2);transform:translateX(-50%) rotate(-2deg);transition:transform .5s var(--ease)}
.res-paket__bild--audio{display:grid;place-items:center;align-content:center;gap:10px;background:radial-gradient(300px 160px at 80% 0%,rgba(134,217,188,.35),transparent 70%),linear-gradient(150deg,var(--res-teal),var(--res-teal-dunkel));color:#fff}
.res-paket__bild--audio svg{width:58px;height:58px}
.res-paket__bild--audio span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.res-paket__text{display:flex;flex-direction:column;gap:6px;padding:16px 18px 20px}
.res-paket__meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--res-teal)}
.res-paket__text b{font-size:17px;line-height:1.25;color:var(--navy)}
.res-paket__text span:not(.res-paket__meta){font-size:15px;line-height:1.45;color:var(--res-grau)}
@media (hover:hover) and (pointer:fine){.res-paket>li:hover .res-paket__bild img{transform:translateX(-50%) translateY(-4px) rotate(0deg)}}

/* Seitenblicke in Bericht und White Paper */
.res-einblick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px);margin-top:36px}
.res-einblick figure{margin:0}
.res-einblick img{width:100%;height:auto;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--res-mint-2),var(--shadow-2)}
.res-einblick figcaption{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--res-teal)}
.res-mitte{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:center;margin-top:40px;text-align:center}
.res-mitte p{font-size:15px;color:var(--res-grau)}

/* Weitere Ressourcen am Seitenende */
.res-mehr-abschnitt{padding:calc(72px*var(--dichte)) 0}
.res-mehr-abschnitt h2{font-size:clamp(24px,2vw,30px);letter-spacing:-.025em}
.res-mehr{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.res-mehr a{display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;align-items:center;height:100%;padding:14px 16px 14px 14px;border-radius:var(--r-l);background:#fff;box-shadow:0 0 0 1px var(--res-line),var(--card-lift);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.res-mehr img{width:60px;height:80px;object-fit:cover;object-position:0 0;border-radius:4px;box-shadow:var(--shadow-1)}
.res-mehr small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--res-teal)}
.res-mehr b{display:block;margin-top:4px;font-size:15.5px;line-height:1.25;color:var(--navy)}
@media (hover:hover) and (pointer:fine){.res-mehr a:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--res-teal),var(--shadow-2)}}

/* Kleine Laptops: vier schmale Spalten werden zu zwei */
@media (max-width:1180px){
  .res-guides,.res-mehr{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Laptop und Tablet */
@media (max-width:1020px){
  .res-guides{grid-template-columns:repeat(2,minmax(0,1fr))}
  .res-paket{grid-template-columns:repeat(2,minmax(0,1fr))}
  .res-mehr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .res-text{grid-template-columns:1fr}
  .res-aside{position:static}
}
/* Handy (Hochformat oder schmal) */
@media (max-width:820px) and (orientation:portrait),(max-width:640px){
  .res-hero h1{font-size:clamp(30px,8.4vw,40px)}
  .res-stapel{height:230px;margin-top:24px}
  .res-guides{grid-template-columns:1fr}
  .res-guide--breit{display:flex;flex-direction:column}
  .res-guide--breit .res-guide__bild{height:230px;min-height:0}
  .res-guide__bild{height:250px}
  .res-paket{grid-template-columns:1fr;gap:14px}
  .res-paket>li{flex-direction:row;align-items:stretch}
  .res-paket__bild{flex:0 0 112px;aspect-ratio:auto;min-height:150px}
  .res-paket__bild img{top:50%;height:auto;width:72%;transform:translate(-50%,-50%) rotate(-2deg)}
  .res-paket__bild--audio svg{width:40px;height:40px}
  .res-paket__text{justify-content:center;padding:14px 16px}
  .res-einblick{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:4px 2px 18px;-webkit-overflow-scrolling:touch}
  .res-einblick figure{flex:0 0 74%;scroll-snap-align:start}
  .res-einblick img{box-shadow:0 0 0 1px var(--res-mint-2),var(--shadow-1)}
  .res-mehr{grid-template-columns:1fr}
  .res-text p:not(.etikett){font-size:17px}
  .res-datei{grid-template-columns:38px minmax(0,1fr) auto;gap:12px;padding:11px 14px 11px 10px}
  .res-datei__symbol{width:38px;height:38px}
}
/* Company profiles: vier Karten in einer Reihe */
.res-raster--vier{grid-template-columns:repeat(4,1fr)}
@media (max-width:1020px){.res-raster--vier{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.res-raster--vier{grid-template-columns:1fr}}