/* KURDISCH-AKADEMIE — Redesign-Vorlage · Basis (Tokens, Typografie, Kopf, Fuß) */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700&family=Inter:wght@400;500;600;700&display=swap'); /* Kurdische Schrift: dieselbe Datei wie auf den seite/-Seiten (seite/assets/style.css). Nur für den arabischen Schriftbereich, Lateinisches bleibt bei Inter. */ @font-face{ font-family:"Shasenem Soran"; src:url("fonts/shasenem-soran.ttf") format("truetype"); font-weight:400 700; font-style:normal; font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200D; } :root{ --rot:#AE151B; --rot-tief:#8B1015; --rot-hell:#C7262C; --papier:#F1EFEA; --papier-2:#E6E3DC; --papier-3:#D8D4CB; --tinte:#141110; --tinte-2:#4A443E; --grau:#605A53; --weiss:#FCFBF9; --schrift-display:"Playfair Display",'Iowan Old Style',Georgia,serif; --schrift-ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:140px; --mass:min(1400px, 92vw); --rand:0px; /* bewusst kantig: Editorial statt Web-App */ --takt:220ms; --z-kopf:100; --z-riss:5; --z-ueber:20; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--papier); color:var(--tinte); font-family:var(--schrift-ui); font-size:17px; line-height:1.6; font-feature-settings:"ss01","cv05"; overflow-x:hidden; } img{max-width:100%; display:block} [hidden]{ display:none !important } /* schlägt .karte{display:flex} beim Filtern */ a{color:inherit} button{font:inherit; color:inherit; cursor:pointer} :focus-visible{outline:3px solid var(--rot); outline-offset:3px} .rot-flaeche :focus-visible{outline-color:#fff} .nur-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .sprung{position:absolute;left:var(--s2);top:-100px;z-index:200;background:var(--tinte);color:#fff;padding:12px 18px;transition:top var(--takt)} .sprung:focus{top:12px} /* ---------- Typografie ---------- */ .display{ font-family:var(--schrift-display); font-weight:900; text-transform:uppercase; line-height:.86; letter-spacing:-.018em; margin:0; hyphens:manual; } .mega{ font-size:clamp(2.6rem, 12vw, 11rem) } .mega[data-fuellen]{ white-space:nowrap; display:block } /* JS passt die Größe exakt auf die Spaltenbreite an */ .gross{ font-size:clamp(2.2rem, 6.4vw, 5.2rem) } .mittel{ font-size:clamp(1.7rem, 3.4vw, 3rem) } .etikett{ font-family:var(--schrift-ui); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; } .marke{ font-family:var(--schrift-display); font-weight:900; letter-spacing:.02em; text-transform:uppercase } .fliess{ max-width:62ch; color:var(--tinte-2) } .rot-flaeche .fliess{ color:rgba(255,255,255,.86) } .kasten-rot{ background:var(--rot); color:#fff; padding:.12em .3em .18em; display:inline-block } .kasten-weiss{ background:var(--papier); color:var(--rot); padding:.02em .2em .08em; display:inline; -webkit-box-decoration-break:clone; box-decoration-break:clone } /* ---------- Flächen & Papier ---------- */ .bahn{ width:var(--mass); margin-inline:auto } .abschnitt{ padding-block:clamp(56px,8vw,var(--s7)) } .rot-flaeche{ background:var(--rot); color:#fff; position:relative; isolation:isolate } .rot-flaeche::after{ /* feines Papierkorn */ content:""; position:absolute; inset:0; z-index:-1; opacity:.28; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)' opacity='.5'/%3E%3C/svg%3E"); } /* Gerissene Papierkante — Maske, damit jede Farbe möglich ist */ .riss{ position:absolute; left:0; right:0; height:46px; z-index:var(--z-riss); pointer-events:none; background-color:var(--riss-farbe, var(--papier)); -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x; -webkit-mask-size:1440px 46px; mask-size:1440px 46px; } .riss--unten{ bottom:-1px; -webkit-mask-image:var(--riss-a); mask-image:var(--riss-a); } .riss--oben{ top:-1px; transform:scaleY(-1); -webkit-mask-image:var(--riss-b); mask-image:var(--riss-b); } :root{ --riss-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,46 L0,12.2 L18.6,7.4 L30.8,7.1 L35.6,28.7 L49.1,30.3 L67.2,24.3 L80.1,37.9 L90.5,31.3 L112.8,9.5 L131.1,13.2 L136.5,7.2 L155.8,14.3 L172.9,14.7 L194.7,19.5 L211.6,16.1 L231.9,11.6 L238.6,14.1 L246,35.6 L267.1,17.1 L278.1,19.4 L295.1,14.8 L320.3,15.2 L325.6,19.5 L351.9,21.9 L364.5,33.1 L372.3,36.8 L379.2,10.8 L402.7,7.6 L419,23 L442.3,11.4 L454.4,23.1 L461.8,9.4 L471,15.4 L480.9,6.1 L493.1,16.9 L512.6,15.9 L531.8,7 L553.2,22.9 L566,35.2 L571.4,7.3 L579.1,27.6 L586.4,8 L591,22.9 L598.3,10.9 L610.5,8.4 L636.7,15 L642.7,8 L652.6,22 L657.1,24.4 L664.4,33.9 L690.3,22.7 L700.2,13.1 L721.5,16.3 L732.8,10.3 L758.9,22.5 L781.2,20.3 L796.8,27.9 L807.1,11 L832.5,14.6 L858.6,24.4 L867.6,10.4 L876.2,18 L899,15.3 L920.9,7.6 L945.3,21.1 L960,9.4 L971.4,21.5 L984.3,13.7 L1004.5,29.4 L1028.8,21.6 L1051.3,24.9 L1063.2,27.8 L1088.9,18.5 L1113.8,14.4 L1136.3,10.1 L1146.9,10.6 L1156.7,38.5 L1168.6,14.8 L1192.9,14.1 L1208.1,16.3 L1212.5,14.5 L1216.6,21.4 L1231.2,20 L1242.5,16 L1264.1,8 L1273.7,11.3 L1289.1,16.8 L1313.5,14.6 L1328.8,15.9 L1342.9,16.3 L1368,19.5 L1393.1,11 L1418.3,29.1 L1432.2,7.4 L1437.8,18.9 L1440,12.2 L1440,46 Z'/%3E%3C/svg%3E"); --riss-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,46 L0,23.8 L24,7.6 L37.5,29.9 L51.4,10.3 L56,7.7 L69.4,15.9 L81.5,7.1 L98.7,18.7 L124.4,13 L136.7,17 L147.7,7.7 L167.8,17.4 L186.2,9.5 L197.4,21.7 L204,30.9 L220.8,21.8 L233.1,11.6 L254.5,16.6 L260.9,21.1 L283.5,10.6 L308.1,17.4 L315.8,32.6 L320.3,21.6 L346.1,21.5 L362.2,25.1 L374,24.8 L382.3,7.5 L390.7,24 L399.5,8 L407.3,16.5 L417,14.1 L431,12.6 L453.2,23.3 L466.4,19.4 L484.8,10.6 L497.9,20.9 L514.3,35.1 L525.7,16.8 L535.3,34.3 L551.4,10.5 L565.9,14.7 L570,13.3 L577.2,22.7 L596.5,9.3 L609.9,7.6 L624.7,19.3 L641.1,16.2 L665.3,7.7 L688.6,15.6 L707.7,17.7 L718.9,12.7 L744.4,12.6 L757.8,21.8 L774.2,10.9 L780.2,10.2 L803.2,33.1 L810,16.9 L833.2,11 L842.7,25 L847.7,21.6 L859.8,8.8 L865.8,20.2 L885,38.5 L903.7,9.3 L928.1,34.9 L935.2,20.1 L955.1,17 L977.5,17.6 L988.9,37.8 L997.5,14.2 L1015.4,16.3 L1029.1,13 L1049.8,23.9 L1073.7,24.9 L1080.6,13.3 L1103.2,6.8 L1123.4,20.6 L1132.1,31.4 L1145.7,21.9 L1159,10.7 L1178,14.6 L1200.4,17.1 L1216.4,18 L1234,23.7 L1252.8,37.6 L1265.6,28 L1278.4,24.8 L1298.2,18.9 L1306,34.6 L1321.5,28.4 L1336.1,8.8 L1347.1,18 L1364.7,16.3 L1376.4,24.9 L1386.8,15.5 L1408.5,11.7 L1413,21.3 L1437.2,9 L1440,23.8 L1440,46 Z'/%3E%3C/svg%3E"); } /* Zeitungssatz als Textur (dekorativ, per JS gefüllt) */ .zeitung{ font-size:3.1px; line-height:4.2px; letter-spacing:.02em; text-align:justify; columns:9; column-gap:9px; opacity:.3; user-select:none; pointer-events:none; color:currentColor; overflow:hidden; word-break:break-word; } @media (max-width:900px){ .zeitung{ columns:4 } } /* ---------- Schaltflächen ---------- */ .knopf{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 30px; border:1.5px solid currentColor; background:transparent; font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; transition:background var(--takt), color var(--takt), transform var(--takt); } .knopf:hover{ background:currentColor } .knopf:hover > *{ mix-blend-mode:normal } .knopf--hell:hover{ background:#fff; color:var(--rot) } .knopf--voll{ background:var(--rot); border-color:var(--rot); color:#fff } .knopf--voll:hover{ background:var(--rot-tief); border-color:var(--rot-tief) } .knopf--dunkel{ background:var(--tinte); border-color:var(--tinte); color:#fff } .knopf--dunkel:hover{ background:#000 } .knopf:active{ transform:translateY(1px) } .textlink{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:6px 0; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; border-bottom:1.5px solid currentColor; transition:gap var(--takt), opacity var(--takt); } .textlink:hover{ gap:14px } .ikone{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7; flex:none } /* ---------- Kopfzeile ---------- */ .kopf{ position:sticky; top:0; z-index:var(--z-kopf); background:var(--rot); color:#fff; border-bottom:1px solid rgba(255,255,255,.18); } .kopf--hell{ background:var(--papier); color:var(--tinte); border-bottom:1px solid var(--papier-3) } .kopf__reihe{ display:flex; align-items:center; gap:var(--s3); min-height:66px } .kopf__marke{ font-size:20px; text-decoration:none; letter-spacing:.04em; white-space:nowrap } .kopf__marke b{ font-weight:900 } .kopf__marke span{ color:rgba(255,255,255,.62) } .kopf--hell .kopf__marke span{ color:var(--rot) } .kopf__nav{ margin-inline:auto } .kopf__nav ul{ display:flex; flex-wrap:wrap; gap:4px 18px; list-style:none; margin:0; padding:0 } .kopf__nav a{ display:block; padding:8px 2px; font-size:14px; text-decoration:none; border-bottom:2px solid transparent; transition:border-color var(--takt), opacity var(--takt); } /* 01.11.2026: polka.css faerbt im Dunkelmodus alle Links hellrot, auf der roten Leiste unlesbar. */ html[data-theme="dark"] .kopf__nav a{ color:inherit } .kopf__nav a:hover{ border-bottom-color:currentColor } .kopf__nav a[aria-current="page"]{ border-bottom-color:currentColor; font-weight:600 } .kopf__werkzeuge{ display:flex; gap:4px; margin-left:auto } .kopf__knopf{ display:grid; place-items:center; width:44px; height:44px; background:none; border:0; border-radius:2px; transition:background var(--takt); } .kopf__knopf:hover{ background:rgba(255,255,255,.14) } .kopf--hell .kopf__knopf:hover{ background:var(--papier-2) } /* Der Kopf ist auf allen Breiten gleich hoch. Als Groesse festgehalten, damit der Auftakt der Startseite den Rest des Schirms genau ausfuellen kann, ohne die Zahl zu raten. */ :root{ --kopf-hoehe:67px } .kopf__burger{ display:none } /* Nicht schrumpfen lassen: im Flexkasten des Kopfes wurde der Burger auf 32 px gedrueckt, auf Bestandsseiten sogar auf 29 — dort nullt eine Seitenregel die Polsterung der Schaltflaechen. Die drei uebrigen Kopfknoepfe stehen auf 44 x 44; das ist zugleich das Mindestmass fuer eine Tippflaeche. */ .kopf__burger{ flex:0 0 44px } /* 1319 statt 1279: seit „Kinder" (11 Punkte) braucht die Leiste rund 1320 px fuer eine Zeile. */ /* 20.10.2026: 1439 statt 1319: „Integration" kam dazu; „Kinder" steht seit 20.10. abends wieder im Kopf (12 Punkte). */ /* 01.11.2026: 1509 statt 1439: „Dokus“ kam dazu, 13 Punkte in der Leiste. */ @media (max-width:1509px){ .kopf__reihe{ flex-wrap:wrap; gap:8px } .kopf__burger{ display:grid; order:-1 } .kopf__marke{ order:0; margin-inline:auto } .kopf__werkzeuge{ order:1; margin-left:0 } .kopf__nav{ order:3; width:100%; margin:0; display:none; border-top:1px solid rgba(255,255,255,.2); padding-block:10px } /* 01.11.2026: 13 Punkte sind hoeher als ein kleines Telefon; die Kopfleiste klebt, also rollt das Menue in sich, sonst bleiben die letzten unerreichbar. */ .kopf__nav.offen{ display:block; max-height:calc(100vh - 67px); max-height:calc(100dvh - 67px); overflow-y:auto } .kopf__nav ul{ flex-direction:column; gap:0 } .kopf__nav a{ padding:12px 0 } } @media (max-width:560px){ .kopf__reihe{ gap:4px; flex-wrap:nowrap } /* 01.11.2026: ohne Umbruch stand das offene Menue neben Logo und Symbolen. */ .kopf__reihe:has(> .kopf__nav.offen){ flex-wrap:wrap } .kopf__marke{ font-size:13px; letter-spacing:.02em } .kopf__konto{ display:none } /* wandert in die Navigation */ } .nur-mobil{ display:none } @media (max-width:560px){ .nur-mobil{ display:block } } /* Auf dem Telefon klemmt .gross am unteren Ende der Spanne (2,2rem). Lange Einzelwoerter — „Muttersprachlich", „Nachschlagewerke", „Drei-Schritte-Schema" — sind dann breiter als die Spalte und schieben die ganze Seite seitwaerts. Deutsche Silbentrennung bricht sie sauber; was das Woerterbuch nicht kennt, bricht notfalls hart. Das Riesenwort im Auftakt bleibt aussen vor: es traegt white-space:nowrap und wird von skript.js auf die Spalte gerechnet. */ @media (max-width:560px){ .display{ hyphens:auto; overflow-wrap:break-word } /* Der rote Kasten bekommt auf jeder Zeile seinen vollen Innenabstand, sonst klebt die zweite Zeile am Rand. */ .marke-rot{ -webkit-box-decoration-break:clone; box-decoration-break:clone } } /* ---------- Fußzeile ---------- */ .fuss{ position:relative; background:var(--rot); color:#fff; margin-top:0; padding-top:clamp(70px,9vw,120px) } .fuss__gitter{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:var(--s4) var(--s3); align-items:start } .fuss a{ text-decoration:none; opacity:.86 } .fuss a:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px } .fuss__titel{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0 0 18px } .fuss__liste{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:15px } .fuss__kontakt{ font-size:19px; line-height:1.7 } .fuss__kontakt a{ opacity:1 } .fuss__mail{ font-weight:600; border-bottom:1.5px solid rgba(255,255,255,.6) } .fuss__wort{ font-size:clamp(2.2rem,11vw,10rem); line-height:.82; margin:clamp(40px,6vw,80px) 0 0; text-align:right; opacity:.97; white-space:nowrap } .fuss__recht{ display:flex; flex-wrap:wrap; gap:10px var(--s4); justify-content:space-between; border-top:1px solid rgba(255,255,255,.3); margin-top:var(--s4); padding-block:22px 30px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.8; } @media (max-width:820px){ .fuss__gitter{ grid-template-columns:1fr 1fr } .fuss__kontakt{ grid-column:1/-1 } .fuss__wort{ text-align:left } } /* ---------- Bewegung ---------- */ .auf{ opacity:0; transform:translateY(22px); transition:opacity 620ms ease-out, transform 620ms cubic-bezier(.2,.7,.3,1) } .auf.da{ opacity:1; transform:none } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important } .auf{ opacity:1; transform:none } } /* Das Zeichen der Akademie steht vor dem Schriftzug. Es ist weiß gezeichnet und lebt vom roten Grund — auf hellem Kopf bekommt es deshalb Tinte. */ .kopf__marke{ display:inline-flex; align-items:center; gap:11px } /* Der Schriftzug ist ein Element, sonst setzt der Abstand der Flexzeile zwischen „KURDISCH", Punkt und „AKADEMIE" Lücken. */ .kopf__marke .kopf__wort{ color:inherit; white-space:nowrap } .kopf__zeichen{ height:30px; width:auto; flex:none } .kopf--hell .kopf__zeichen{ filter:brightness(0) saturate(100%) } @media (max-width:560px){ .kopf__zeichen{ height:26px; margin-right:8px; vertical-align:-7px } } /* Acht Navigationspunkte neben der Marke: ab mittlerer Breite ruecken Zeichen, Schriftzug und Navigation etwas zusammen, damit nichts umbricht. 20.10.2026: gilt jetzt auf jeder Breite, die Kopfleiste ist ab 1600 px auf 944 px gedeckelt und „Kinder" (12. Punkt) brach dort in eine zweite Zeile. */ @media all{ .kopf__marke{ font-size:17px; gap:9px } .kopf__zeichen{ height:26px } .kopf__nav a{ font-size:13px } .kopf__nav ul{ gap:4px 12px } } /* Handy: muss HINTER der 1340er-Regel stehen, sonst setzt sie den Schriftzug wieder auf 17 px und der Kopf wird bei 320 px 373 px breit. Unter 360 px steht der Schriftzug zweizeilig, damit Burger, Zeichen und zwei Knoepfe (je 44 px) nebeneinander passen. */ @media (max-width:560px){ .kopf__marke{ font-size:13px; gap:6px; min-width:0 } .kopf__zeichen{ height:26px; margin-right:0 } } @media (max-width:360px){ .kopf__marke .kopf__wort{ white-space:normal; line-height:1.1 } .kopf__marke .kopf__wort > span{ display:none } .kopf__marke .kopf__wort b{ display:block } } /* ── Bestandsinhalte auf dem Telefon ───────────────────────────────────────── Die 1541 Detailseiten tragen Markup aus dem Bestand: 609 davon haben Tabellen mit fuenf und mehr Spalten, die bei 375 px bis zu 595 px breit werden und die ganze Seite seitwaerts schieben. Als Block mit eigener Rollachse bleibt die Tabelle vollstaendig lesbar, ohne die Spalte zu sprengen — die Zeilen richten sich in der anonymen Tabellenbox weiter aneinander aus. Keine der 19 Naben hat eine Tabelle, dort aendert sich also nichts. */ @media (max-width:560px){ /* „wichtig" ist hier Absicht: die Bestandsseiten setzen im eigenen Stilblock Regeln wie `.tbl{ border-radius:12px; overflow:hidden }`, um runde Ecken zu beschneiden. Mit Klassenspezifitaet stechen sie jede Elementregel — die Tabelle bliebe abgeschnitten und waere mit dem Finger nicht zu schieben. */ table{ display:block !important; width:max-content !important; max-width:100% !important; overflow-x:auto !important } pre{ max-width:100%; overflow-x:auto } code{ overflow-wrap:break-word } /* Bestandsseiten setzen Ueberschriften und Aufklapp-Zeilen als `display:flex` ohne Umbruch — `.section-h` auf 235 Seiten, `summary` auf 111. Auf dem Telefon schiebt das den kurdischen Teil der Zeile aus dem Bild, wo er unter `body{ overflow-x:hidden }` unerreichbar ist. Ueber die Bauform formuliert statt ueber Bestandsklassen: eine Ueberschrift ist nie eine Reihe von Bedienelementen, die zusammenbleiben muss — anders als `.playbtn` oder `.slider-ball`, die ausdruecklich nicht umbrechen duerfen. Wo nicht Flex gesetzt ist, bleibt die Regel wirkungslos. */ h1, h2, h3, h4, summary{ flex-wrap:wrap } } /* Lernvideo im Akkordeon (18.10.2026): Die Akkordeon-Hoehe ist fest (clamp 320–450 px, mobil 220–320 px), ein 16:9-Video ist bei voller Breite hoeher. Unten wurden Bild und Bedienleiste abgeschnitten. Enthaelt die Tafel ein