/* ========================================================================== Iqraa-Schule Beckum Ein Stylesheet fuer alle drei Sprachen und beide Leserichtungen. Wichtigste Regel in dieser Datei: es werden durchgaengig LOGISCHE CSS-Eigenschaften benutzt (margin-inline-start statt margin-left, text-align:start statt text-align:left ...). Dadurch spiegelt sich das komplette Layout automatisch, sobald gesetzt wird. Ein zweites RTL-Stylesheet ist nicht noetig - nur die wenigen echten Ausnahmen stehen ganz unten unter "Arabisch". ========================================================================== */ /* -------------------------------------------------------------------------- 1. Farben, Schriften, Masse Alle Farben stammen aus dem Vereinslogo und dem bestehenden Flyer. -------------------------------------------------------------------------- */ :root{ --ink: #1A1614; /* Konturschwarz des Logos - Fließtext */ --ink-soft: #4A423B; --muted: #6B6259; --green: #1B6B4F; /* Gruen der Zeitangabe auf dem Flyer */ --green-dark: #14503B; --green-deep: #0F3E2D; --green-pale: #EDF4F0; --gold: #F2A81D; /* Sonnenkreis des Logos */ --gold-deep: #C4820A; --red: #C1272D; /* rote Kalligrafie im Logo - sehr sparsam */ --paper: #FFFFFF; --paper-warm: #FBF7EF; --line: #E4DACA; --line-soft: #EFE8DC; --wrap: 1120px; --header-h: 74px; --lat-head: 'Bitter', Georgia, 'Times New Roman', serif; --lat-body: 'Karla', 'Segoe UI', system-ui, sans-serif; --ar-head: 'Cairo', 'Segoe UI', Tahoma, sans-serif; --ar-body: 'Noto Naskh Arabic', 'Karla', 'Segoe UI', Tahoma, sans-serif; --head: var(--lat-head); --body: var(--lat-body); /* Feines Achtstern-Muster (Khatim), aufgegriffen vom Flyer. Wird nur in zwei Abschnitten eingesetzt, nie flaechendeckend. */ --muster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%231B6B4F' stroke-width='1.1'%3E%3Crect x='16' y='16' width='32' height='32'/%3E%3Crect x='16' y='16' width='32' height='32' transform='rotate(45 32 32)'/%3E%3Crect x='-16' y='-16' width='32' height='32'/%3E%3Crect x='-16' y='-16' width='32' height='32' transform='rotate(45 0 0)'/%3E%3Crect x='48' y='-16' width='32' height='32'/%3E%3Crect x='48' y='-16' width='32' height='32' transform='rotate(45 64 0)'/%3E%3Crect x='-16' y='48' width='32' height='32'/%3E%3Crect x='-16' y='48' width='32' height='32' transform='rotate(45 0 64)'/%3E%3Crect x='48' y='48' width='32' height='32'/%3E%3Crect x='48' y='48' width='32' height='32' transform='rotate(45 64 64)'/%3E%3C/g%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- 2. Grundlagen -------------------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:1.0625rem; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{ max-width:100%; height:auto; display:block; } a{ color:var(--green); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } a:hover{ color:var(--green-dark); } h1,h2,h3,h4{ font-family:var(--head); font-weight:600; line-height:1.2; margin:0; color:var(--ink); } h1{ font-size:clamp(1.9rem, 1.15rem + 2.6vw, 3rem); letter-spacing:-.01em; } h2{ font-size:clamp(1.45rem, 1.1rem + 1.3vw, 2rem); } h3{ font-size:1.15rem; } p{ margin:0 0 1.05em; } p:last-child{ margin-bottom:0; } ul,ol{ margin:0 0 1.05em; padding-inline-start:1.3em; } li{ margin-bottom:.4em; } strong,b{ font-weight:700; } hr{ border:0; border-top:1px solid var(--line); margin:2.5rem 0; } ::selection{ background:var(--gold); color:var(--ink); } :focus-visible{ outline:3px solid var(--gold-deep); outline-offset:2px; border-radius:2px; } /* Sprunglink fuer Tastatur- und Screenreader-Nutzung. Versteckt wird NACH OBEN geschoben, nicht zur Seite: ein seitlicher Versatz (das uebliche left:-9999px) waere richtungsabhaengig und wuerde im arabischen Layout nach rechts wandern und die Seite verbreitern. */ .skip{ position:absolute; inset-inline-start:0; top:0; z-index:999; transform:translateY(-130%); background:var(--green-deep); color:#fff; padding:12px 20px; text-decoration:none; font-weight:700; } .skip:focus{ transform:none; } .wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:22px; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* -------------------------------------------------------------------------- 3. Wiederkehrende Bausteine -------------------------------------------------------------------------- */ /* Kleine Vorzeile ueber Ueberschriften */ .eyebrow{ font-family:var(--body); font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 .9rem; } /* Abschnittstitel: die Goldlinie ist exakt so breit wie der Text - deshalb sitzt sie auf einem inline-block- und nicht auf der

. */ .section-title{ margin:0 0 1.6rem; } .section-title > span{ display:inline-block; /* reichlich Luft, damit die Linie nicht durch Unterlaengen schneidet (Beitrag, anmelden, Zeiten ...) */ padding-bottom:.34em; border-bottom:3px solid var(--gold); } .section{ padding-block:clamp(52px, 7vw, 88px); } .section--warm{ background:var(--paper-warm); border-block:1px solid var(--line-soft); } .section--muster{ position:relative; } .section--muster::before{ content:""; position:absolute; inset:0; z-index:0; background-image:var(--muster); opacity:.045; pointer-events:none; } .section--muster > .wrap{ position:relative; z-index:1; } .lead{ font-size:1.15rem; color:var(--ink-soft); max-width:60ch; } .prose{ max-width:66ch; } .prose--nach-betrag{ margin-top:1.4rem; } .field--abstand{ margin-bottom:1.4rem; } /* Knoepfe. Radius bewusst klein und nicht ueberall gleich. */ .btn{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--body); font-size:1rem; font-weight:700; padding:.78em 1.5em; border:2px solid transparent; border-radius:4px; text-decoration:none; cursor:pointer; transition:background-color .18s ease, color .18s ease, border-color .18s ease; } .btn-primary{ background:var(--green); color:#fff; border-color:var(--green); } .btn-primary:hover{ background:var(--green-dark); border-color:var(--green-dark); color:#fff; } .btn-ghost{ background:transparent; color:var(--green-dark); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--green); color:var(--green-dark); background:var(--green-pale); } .btn[disabled]{ opacity:.55; cursor:not-allowed; } .btn svg{ inline-size:1.05em; block-size:1.05em; flex:none; } /* Zahlen, Telefonnummern und Betraege bleiben auch im Arabischen von links nach rechts lesbar. */ .ltr{ direction:ltr; unicode-bidi:isolate; } /* -------------------------------------------------------------------------- 4. Kopfbereich -------------------------------------------------------------------------- */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.97); -webkit-backdrop-filter:saturate(180%) blur(6px); backdrop-filter:saturate(180%) blur(6px); border-bottom:1px solid var(--line); } .header-inner{ min-height:var(--header-h); display:flex; align-items:center; gap:14px; } .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; margin-inline-end:auto; } .brand-logo{ inline-size:46px; block-size:46px; object-fit:contain; flex:none; } .brand-text{ display:flex; flex-direction:column; line-height:1.2; } /* Arabische Schrift braucht mehr Zeilenhoehe als lateinische, sonst stossen die Unterlaengen in die Zeile darunter. */ .brand-ar{ font-family:var(--ar-head); font-size:1.02rem; font-weight:700; color:var(--green-dark); line-height:1.55; } .brand-de{ font-family:var(--body); font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); } .site-nav ul{ list-style:none; display:flex; align-items:center; gap:24px; margin:0; padding:0; } .site-nav a{ font-size:.95rem; font-weight:500; color:var(--ink-soft); text-decoration:none; padding-block:6px; border-bottom:2px solid transparent; } .site-nav a:hover{ color:var(--green-dark); border-bottom-color:var(--gold); } /* Sprachumschalter - drei Textknoepfe, bewusst keine Flaggen: Arabisch gehoert keinem einzelnen Land. */ .lang-switch{ display:flex; align-items:stretch; border:1px solid var(--line); border-radius:4px; overflow:hidden; flex:none; } .lang-switch button{ font-family:var(--body); font-size:.82rem; font-weight:700; letter-spacing:.05em; padding:.42em .72em; min-width:2.6em; background:#fff; color:var(--muted); border:0; border-inline-start:1px solid var(--line); cursor:pointer; line-height:1.5; } .lang-switch button:first-child{ border-inline-start:0; } .lang-switch button:hover{ background:var(--green-pale); color:var(--green-dark); } .lang-switch button[aria-pressed="true"]{ background:var(--green); color:#fff; } .lang-switch button[data-lang="ar"]{ font-family:var(--ar-head); font-size:.95rem; letter-spacing:0; } .nav-toggle{ display:none; background:#fff; border:1px solid var(--line); border-radius:4px; padding:.42em .6em; cursor:pointer; color:var(--ink); } .nav-toggle svg{ inline-size:22px; block-size:22px; display:block; } /* -------------------------------------------------------------------------- 5. Kopfbild-Bereich Asymmetrisch: Text links, Logo rechts. Kein zentrierter Block. -------------------------------------------------------------------------- */ .hero{ background:var(--paper-warm); border-bottom:1px solid var(--line-soft); position:relative; } .hero::before{ content:""; position:absolute; inset:0; background-image:var(--muster); opacity:.05; pointer-events:none; } .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; gap:clamp(24px,5vw,64px); align-items:center; padding-block:clamp(40px,6vw,74px); } .hero h1{ margin-bottom:.5rem; } .hero-ar{ display:block; font-family:var(--ar-head); font-weight:700; font-size:clamp(1.5rem, 1rem + 1.9vw, 2.35rem); line-height:1.5; color:var(--green-dark); margin-bottom:.1em; /* Arabisch braucht rtl fuer die richtige Verbindung der Buchstaben, soll aber im deutschen Layout links buendig zum Titel darunter stehen und nicht am rechten Spaltenrand kleben. */ direction:rtl; text-align:left; } .hero-lat{ display:block; } .hero .lead{ margin-block:1.1rem 1.7rem; } .hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:0; } .hero-mark{ inline-size:clamp(150px, 20vw, 230px); flex:none; } .hero-mark img{ inline-size:100%; } /* Faktenstreifen direkt unter dem Kopfbereich */ .factstrip{ background:var(--green-deep); color:#fff; position:relative; z-index:1; } .factstrip ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; } .factstrip li{ flex:1 1 220px; margin:0; padding:18px 22px; border-inline-start:1px solid rgba(255,255,255,.16); } .factstrip li:first-child{ border-inline-start:0; } .factstrip .fact-label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:.2em; } .factstrip .fact-value{ display:block; font-family:var(--head); font-size:1.16rem; font-weight:600; } .factstrip .fact-value em{ font-style:normal; color:#FFD98A; } /* -------------------------------------------------------------------------- 6. Karten - bewusst unterschiedlich gross, ohne Schlagschatten -------------------------------------------------------------------------- */ .cards{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr); margin-top:1.8rem; } .card{ background:#fff; border:1px solid var(--line); padding:22px 24px 24px; } .card--wide{ grid-column:span 2; } .card--accent{ border-inline-start:4px solid var(--gold); } .card h3{ margin-bottom:.5rem; color:var(--green-dark); } /* Einzige Stelle mit dem Rot aus dem Logo - dieselbe Hervorhebung wie auf dem gedruckten Flyer ("Kinder ab 6 Jahren"). */ .card--alter h3{ color:var(--red); } .card p:last-child{ margin-bottom:0; } .card-meta{ font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.45rem; } /* Preisangabe */ .betrag{ font-family:var(--head); font-weight:700; font-size:clamp(2rem, 1.4rem + 2vw, 2.9rem); color:var(--green-dark); line-height:1; display:block; margin-bottom:.25rem; } .betrag-sub{ font-size:.95rem; color:var(--muted); } /* Die vier Hinweise bleiben eine nummerierte Liste - genau wie auf dem Papierformular, das die Eltern schon kennen. */ .hinweise{ list-style:none; counter-reset:hinweis; padding:0; margin:1.6rem 0 0; max-width:74ch; } .hinweise li{ counter-increment:hinweis; position:relative; padding-inline-start:3.1rem; padding-block:.55rem; margin-bottom:1.05rem; border-inline-start:1px solid var(--line); } .hinweise li::before{ content:counter(hinweis) "."; position:absolute; inset-inline-start:0; top:.5rem; font-family:var(--head); font-weight:700; font-size:1.35rem; color:var(--gold-deep); line-height:1; inline-size:2.2rem; text-align:end; } .hinweise h3{ font-size:1.02rem; margin-bottom:.15rem; } .hinweise p{ margin:0; color:var(--ink-soft); } /* -------------------------------------------------------------------------- 7. Anmeldeformular -------------------------------------------------------------------------- */ .form-intro{ max-width:62ch; margin-bottom:2rem; } .anmeldung-form{ max-width:820px; } fieldset{ border:0; border-top:1px solid var(--line); margin:0 0 2.1rem; padding:1.5rem 0 0; } legend{ font-family:var(--head); font-size:1.1rem; font-weight:600; color:var(--green-dark); padding:0; margin-bottom:.2rem; } .legend-hint{ font-size:.9rem; color:var(--muted); margin:-.1rem 0 1.1rem; } .form-grid{ display:grid; gap:16px 20px; grid-template-columns:repeat(2,1fr); } .field--full{ grid-column:1 / -1; } .field label, .fieldset-label{ display:block; font-size:.9rem; font-weight:700; color:var(--ink-soft); margin-bottom:.35rem; } .req{ color:var(--red); font-weight:700; margin-inline-start:.15em; } .field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="date"], .field textarea, .field select{ inline-size:100%; font-family:var(--body); font-size:1rem; color:var(--ink); padding:.62em .75em; background:#fff; border:1px solid var(--muted); border-radius:3px; transition:border-color .15s ease, box-shadow .15s ease; } .field textarea{ min-block-size:104px; resize:vertical; } .field input:hover, .field textarea:hover{ border-color:var(--ink-soft); } .field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--green); box-shadow:0 0 0 3px rgba(27,107,79,.16); outline:none; } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:var(--red); box-shadow:0 0 0 3px rgba(193,39,45,.12); } .field-hint{ font-size:.84rem; color:var(--muted); margin-top:.3rem; } .field-error{ display:none; font-size:.86rem; font-weight:700; color:var(--red); margin-top:.3rem; } .field.has-error .field-error{ display:block; } /* Auswahlfelder (Zahlung, Fotoerlaubnis) */ .choice-list{ display:flex; flex-direction:column; gap:9px; } .choice{ display:flex; align-items:flex-start; gap:.65em; border:1px solid var(--line); border-radius:3px; padding:.7em .85em; cursor:pointer; background:#fff; transition:border-color .15s ease, background-color .15s ease; } .choice:hover{ border-color:var(--green); background:var(--green-pale); } .choice input{ margin:.28em 0 0; accent-color:var(--green); flex:none; inline-size:1.05em; block-size:1.05em; } .choice:has(input:checked){ border-color:var(--green); background:var(--green-pale); } .choice-text{ font-size:.98rem; } .choice-text small{ display:block; color:var(--muted); font-size:.85rem; } /* Hinweis, der nur bei Muensterlandkarte erscheint */ .zahlhinweis{ display:none; margin-top:.9rem; padding:.85em 1em; background:var(--green-pale); border-inline-start:4px solid var(--green); font-size:.94rem; } .zahlhinweis.is-visible{ display:block; } /* Felder, die erst nach einer Auswahl erscheinen (Gruppe, Kartennummer, Allergietext). Eine Mechanik fuer alle drei. */ .bedingt{ display:none; margin-top:1rem; } .bedingt.is-visible{ display:block; } .bedingt--schmal{ max-inline-size:22rem; } /* Bestaetigungsfenster nach dem Absenden. z-index ueber dem Kopfbereich (100) und dem Sprunglink (999). */ .modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(26,22,20,.55); } .modal[hidden]{ display:none; } .modal-box{ background:var(--paper); inline-size:100%; max-inline-size:31rem; max-block-size:88vh; overflow-y:auto; border-top:4px solid var(--green); box-shadow:0 18px 50px rgba(0,0,0,.28); padding:26px 28px; } .modal-box h3{ font-family:var(--head); font-size:1.2rem; color:var(--green-dark); margin-bottom:.55rem; } .modal-box p{ margin-bottom:1rem; } .modal-spam{ background:var(--green-pale); border-inline-start:4px solid var(--green); padding:.8em 1em; font-size:.94rem; } .modal-aktion{ margin:1.2rem 0 0; } /* Dauerhafter Hinweis oben im Anmeldeformular */ .formhinweis{ margin-top:.9rem; padding:.85em 1em; background:var(--green-pale); border-inline-start:4px solid var(--green); font-size:.94rem; } /* Honigtopf gegen automatisierte Eintraege - fuer Menschen unsichtbar, fuer einfache Ausfuellprogramme aber ganz normal vorhanden. Auch hier kein seitlicher Versatz, siehe .skip weiter oben. */ .hp{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); opacity:0; pointer-events:none; } .form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:.6rem; } .form-status{ font-size:.95rem; font-weight:700; } .form-status[data-state="sending"]{ color:var(--muted); } .form-status[data-state="error"]{ color:var(--red); } .form-erfolg{ display:none; border:1px solid var(--green); border-inline-start-width:5px; background:var(--green-pale); padding:22px 24px; } .form-erfolg.is-visible{ display:block; } .form-erfolg h3{ color:var(--green-dark); margin-bottom:.4rem; } .form-fehler{ display:none; border:1px solid var(--red); border-inline-start-width:5px; background:#FDF2F2; padding:16px 20px; margin-top:1.2rem; } .form-fehler.is-visible{ display:block; } .form-fehler p{ margin-bottom:.7rem; } /* -------------------------------------------------------------------------- 8. Kontakt -------------------------------------------------------------------------- */ .kontakt-grid{ display:grid; gap:36px; grid-template-columns:1fr 1fr; align-items:start; } .kontakt-liste{ list-style:none; padding:0; margin:0; } .kontakt-liste li{ display:flex; gap:14px; align-items:flex-start; padding-block:14px; border-bottom:1px solid var(--line); margin:0; } .kontakt-liste li:first-child{ border-top:1px solid var(--line); } .kontakt-liste svg{ inline-size:20px; block-size:20px; color:var(--green); flex:none; margin-top:4px; } .kontakt-liste .k-label{ display:block; font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); } .kontakt-liste .k-wert{ font-size:1.05rem; font-weight:500; } .kontakt-liste a{ text-decoration:none; } .kontakt-liste a:hover{ text-decoration:underline; } /* Angaben, die der Verein noch nachtragen muss */ .platzhalter{ background:#FFF6D9; border:1px dashed var(--gold-deep); color:#6B4E00; font-weight:700; font-size:.88rem; padding:.15em .45em; border-radius:2px; display:inline-block; } /* -------------------------------------------------------------------------- 9. Fussbereich -------------------------------------------------------------------------- */ .site-footer{ background:var(--green-deep); color:#D9E5DF; padding-block:44px 30px; margin-top:0; } .site-footer a{ color:#fff; text-decoration:none; } .site-footer a:hover{ text-decoration:underline; } .footer-grid{ display:grid; gap:28px; grid-template-columns:auto 1fr auto; align-items:start; } .footer-brand{ display:flex; gap:12px; align-items:center; } .footer-brand img{ inline-size:52px; block-size:52px; object-fit:contain; } .footer-name{ font-family:var(--head); font-size:1.05rem; font-weight:600; color:#fff; line-height:1.3; } .footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; } .footer-links li{ margin:0; } .footer-note{ border-top:1px solid rgba(255,255,255,.14); margin-top:26px; padding-top:16px; font-size:.85rem; color:#A9BFB6; display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; } /* -------------------------------------------------------------------------- 10. Impressum / Datenschutz -------------------------------------------------------------------------- */ .legal{ padding-block:clamp(38px,5vw,64px); } .legal .prose h2{ margin-top:2.2rem; margin-bottom:.6rem; font-size:1.3rem; } .legal .prose h3{ margin-top:1.5rem; margin-bottom:.35rem; } .legal .prose h2:first-of-type{ margin-top:1rem; } .legal dl{ margin:0 0 1.4rem; } .legal dt{ font-weight:700; color:var(--ink-soft); margin-top:.9rem; font-size:.9rem; } .legal dd{ margin:0; } .zurueck{ display:inline-flex; align-items:center; gap:.4em; font-size:.92rem; font-weight:700; text-decoration:none; margin-bottom:1.4rem; } .zurueck:hover{ text-decoration:underline; } .rechtshinweis{ background:var(--paper-warm); border:1px solid var(--line); padding:14px 18px; font-size:.92rem; margin-bottom:1.8rem; } /* -------------------------------------------------------------------------- 11. Schmalere Bildschirme -------------------------------------------------------------------------- */ @media (max-width:900px){ .cards{ grid-template-columns:repeat(2,1fr); } .card--wide{ grid-column:span 2; } .kontakt-grid{ grid-template-columns:1fr; gap:28px; } .footer-grid{ grid-template-columns:1fr; } } @media (max-width:780px){ .nav-toggle{ display:block; order:3; } .lang-switch{ order:2; } .site-nav{ order:4; display:none; position:absolute; inset-inline:0; top:100%; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 8px 20px -14px rgba(0,0,0,.4); padding:8px 22px 16px; } .site-nav.is-open{ display:block; } .site-nav ul{ flex-direction:column; align-items:stretch; gap:0; } .site-nav li{ margin:0; } .site-nav a{ display:block; padding-block:12px; border-bottom:1px solid var(--line-soft); } .site-nav li:last-child a{ border-bottom:0; } .header-inner{ position:relative; flex-wrap:wrap; } .brand-ar{ font-size:.95rem; } } @media (max-width:680px){ body{ font-size:1rem; } .hero-grid{ grid-template-columns:1fr; } .hero-mark{ inline-size:132px; order:-1; } .cards{ grid-template-columns:1fr; } .card--wide{ grid-column:span 1; } .form-grid{ grid-template-columns:1fr; } .factstrip li{ flex-basis:100%; border-inline-start:0; border-top:1px solid rgba(255,255,255,.16); } .factstrip li:first-child{ border-top:0; } .hero-actions .btn{ flex:1 1 auto; justify-content:center; } } @media (max-width:400px){ .brand-logo{ inline-size:38px; block-size:38px; } .brand-de{ font-size:.64rem; } .lang-switch button{ padding:.4em .55em; min-width:2.3em; } } /* -------------------------------------------------------------------------- 12. Arabisch Schriftwechsel und die wenigen Stellen, die logische Eigenschaften nicht von selbst richtig hinbekommen. -------------------------------------------------------------------------- */ .lang-ar{ --head: var(--ar-head); --body: var(--ar-body); font-size:1.13rem; /* Naskh laeuft kleiner als Karla */ line-height:1.95; /* arabische Schrift braucht mehr Durchschuss */ } .lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar h4, .lang-ar legend, .lang-ar .betrag, .lang-ar .footer-name, .lang-ar .factstrip .fact-value{ font-family:var(--ar-head); line-height:1.45; } .lang-ar .eyebrow, .lang-ar .card-meta, .lang-ar .fact-label, .lang-ar .k-label, .lang-ar .brand-de{ letter-spacing:0; } /* Der arabische Schulname im Kopfbereich waere sonst doppelt */ .lang-ar .hero-ar{ display:none; } /* Zaehler der Hinweisliste: arabischer Punkt sitzt anders */ .lang-ar .hinweise li::before{ font-family:var(--ar-head); font-size:1.25rem; } /* Aufzaehlungspunkte etwas weiter weg vom Text */ .lang-ar ul, .lang-ar ol{ padding-inline-start:1.6em; } [dir="rtl"] .zurueck svg{ transform:scaleX(-1); } [dir="rtl"] .site-nav{ box-shadow:0 8px 20px -14px rgba(0,0,0,.4); } /* -------------------------------------------------------------------------- 13. Drucken - Eltern drucken die Seite gelegentlich aus -------------------------------------------------------------------------- */ @media print{ .site-header, .nav-toggle, .lang-switch, .hero-actions, .anmeldung-form, .skip, .site-nav{ display:none !important; } body{ font-size:11pt; background:#fff; } .hero, .section--warm{ background:#fff; } .hero::before, .section--muster::before{ display:none; } .factstrip{ background:#fff; color:#000; border:1px solid #999; } .factstrip .fact-label{ color:#000; } .site-footer{ background:#fff; color:#000; } .site-footer a{ color:#000; } a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; } .section{ padding-block:14pt; break-inside:avoid; } } /* -------------------------------------------------------------------------- 14. Weniger Bewegung -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; } }