/* ------------------------------------------------------------------
   Stauraumliebe — Anpassung des Templates „Ryen King".

   Nur Farbe und Schrift. Größen, Abstände und Layout stammen
   unverändert aus dem Template. Wo doch etwas angepasst ist, steht
   der Grund daneben.
   ------------------------------------------------------------------ */

:root{
  --paper:#F7EEE2; --paper-card:#FFF8EF;
  --ink:#2E1E16; --ink-strong:#150F0C; --ink-muted:#6E5748; --link:#96401A;
  --near-black:#150F0C; --umber:#2E1E16; --cream:#FFF2E2;
  --amber:#E8853A; --glow:#FF7A2E; --burnt:#B4491E;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
}

/* ------------------------------------------------------------ Schrift
   Anton übernimmt die Display-Rollen, Archivo alles andere.
   Die Schriftgrößen des Templates bleiben unverändert. */
.neue,.neue-headline1,.neue-headline2,.neue-headline3,.neue-text1,.neue-text2,
.neue-headline2-green,.m2headline1,.m2headline3,.m2headline4,
.about__title,.blog__title,.contacts__title,.services__card-name,
.hero__title,.home-author__name,.home-ticker__text{
  font-family:Anton,"Archivo Black",Impact,sans-serif;font-weight:400;letter-spacing:.02em}
.manrope,.manrope-text1,.manrope-text2,.m2text1,.m2text3,.m2text4,
body,p,li,input,textarea,button{
  font-family:Archivo,"Söhne",system-ui,-apple-system,sans-serif}

/* Anton hat keine Unterlängen. Bei den 90 % Zeilenhöhe des Templates
   kleben zwei Zeilen aufeinander; im Pinterest-Titelbild steht dort
   ein schmaler Streifen Luft. */
.neue-headline1,.m2headline1{line-height:1.02}
.neue-headline2{line-height:1.06}
.home-author__name .zeile2{display:block}

/* ------------------------------------------------------------ Logo
   Ersetzt die zwei Buchstaben des Templates. */
.header__logo,.header__menu-logo{display:inline-flex;align-items:center;font-size:0}
.header__logo img,.header__menu-logo img{height:36px;width:auto;display:block}

/* ------------------------------------------------------------ Kontakt
   Zwei Rechtstext-Links statt einem. */
.contacts__private{display:flex;gap:1.5rem}
.contacts__private a{color:inherit;text-decoration:none}
.contacts__private a:hover{text-decoration:underline}

/* kontakt@stauraumliebe.de ist länger als hey@ryenking.com und bricht
   sonst mitten im Wort. */
/* Bei gleicher Schriftgroesse wie die uebrigen Angaben passt die Adresse
   nicht in eine Zeile - deshalb bewusst am @ umgebrochen statt mitten im
   Wort. */
.contacts__mail{overflow-wrap:normal;word-break:normal}

/* ------------------------------------------------------------ Beitrag
   Der Markdown-Text bringt keine Template-Klassen mit, deshalb hier
   dieselben Werte wie .body__text und .body__important der Vorlage. */
.body p,.body li{font-family:Archivo,sans-serif;font-size:20px;line-height:160%}
.body h2{font-family:Anton,sans-serif;letter-spacing:.02em;text-transform:uppercase;
  font-size:40px;line-height:120%;margin:64px 0 16px}
.body h3{font-family:Archivo,sans-serif;font-weight:600;font-size:24px;
  line-height:140%;margin:40px 0 12px}
.body p{margin:0 0 24px}
.body ul,.body ol{padding-left:24px;margin:0 0 24px}
.body li{margin:8px 0}
.body blockquote{margin:32px 0;padding:16px 20px;border-left:4px solid var(--amber)}
.body blockquote p{margin:0}
@media only screen and (max-width:1559px){
  .body p,.body li{font-size:18px}
  .body h2{font-size:32px}
  .body h3{font-size:20px}
}
@media only screen and (max-width:700px){
  .body p,.body li{font-size:16px}
  .body h2{font-size:26px}
}
/* Die Anrisszeile ueber dem Bild ist eine Ueberschrift und traegt deshalb
   dieselbe Groesse wie die H2 im Text darunter - vorher 22 px gegen 32 px. */
.hero__headline{font-size:40px;line-height:120%}
@media only screen and (max-width:1559px){.hero__headline{font-size:32px}}
@media only screen and (max-width:700px){.hero__headline{font-size:26px}}

/* Produktlink: kein Knopf, keine Karte, kein Produktbild — Amazon-Fotos
   dürfen nicht frei verwendet werden. */
.produkt-link{margin:8px 0 40px;font-weight:600}
.produkt-link a{color:var(--link);text-decoration:none}
.produkt-link a:hover{text-decoration:underline}

/* Werbekennzeichnung: steht im Hero über dem Text, wiederholt am Ende. */
.pflichthinweis{display:block}
.pflichthinweis strong{color:var(--amber);text-transform:uppercase;letter-spacing:.08em}
.pflichthinweis-fuss{margin-top:32px;font-size:14px;color:var(--ink-muted)}

/* ------------------------------------------------------------ Zugänglichkeit
   Im Template nicht vorgesehen. */
.skip{position:absolute;left:-9999px;z-index:100}
.skip:focus{left:1rem;top:1rem;background:var(--cream);color:var(--ink-strong);
  padding:.6rem 1rem;border-radius:6px}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Der Kontakt-Knopf des Templates trägt "WORK WITH ME" als gezeichnete
   Buchstabenpfade — Wortlaut und Farbe stecken im HTML, nicht im CSS.
   Ersetzt durch denselben Kreis in derselben Größe mit deutschem Label. */
.contacts__button{position:relative;display:grid;place-items:center;
  width:200px;height:200px;text-decoration:none;color:var(--near-black)}
.contacts__button-ring{position:absolute;inset:0;border-radius:50%;background:var(--amber)}
.contacts__button-label{position:relative;font-family:Anton,sans-serif;
  text-transform:uppercase;letter-spacing:.02em;font-size:26px}
@media (hover:hover) and (pointer:fine){
  .contacts__button-ring{transition:box-shadow .18s var(--ease-out)}
  .contacts__button:hover .contacts__button-ring{box-shadow:0 0 40px 8px rgba(255,122,46,.45)}
}

/* Der Kreis dreht sich weiter wie im Template (10 s, animation-circle).
   Im Original läuft der Text auf der Kreisbahn und bleibt dabei aus jeder
   Richtung lesbar; gerader Text stünde die halbe Zeit auf dem Kopf.
   Deshalb dreht das Label gegenläufig mit und steht still. */
/* Drehung entfernt: sichtbar dreht sich nichts (Kreis + gegenlaeufige
   Beschriftung), sie liess aber die Layouthoehe des Abschnitts staendig
   um rund 40 px pendeln - daher das Zucken beim Hereinscrollen. */
.contacts__button,.contacts__button-label{animation:none}

/* --------------------------------------------------- Korrekturen 04.09.
   Das Template dreht sein Textlogo „RK" um 90° — bei einer Bildmarke
   liegt sie dadurch auf der Seite. */
.header__logo{transform:none!important;-webkit-transform:none!important}

/* Das Logo erscheint nur im Kopf, nicht zusätzlich im Hamburger-Menü. */
.header__menu-logo{display:none!important}

/* Der rotierende „Work with me"-Kreis im ersten Abschnitt entfällt.
   visibility statt display, damit sich am Layout nichts verschiebt. */
/* Drehender Kreis im ersten Abschnitt ---------------------------------- */
/* Wie in der Vorlage, aber statt einer SVG-Grafik echte Schrift: so kommt
   Anton und die Akzentfarbe aus dem CSS. Jeder Buchstabe ist eine halbe
   Hoehe hohe Zeile, um die Mitte gedreht - der Ring dreht sich als Ganzes. */
.home-author__button{visibility:visible;display:block;text-decoration:none;
  color:var(--amber);border-radius:50%}
.kreis-text{position:absolute;inset:0;
  animation:20s linear infinite animation-circle}
.kreis-text span{
  position:absolute;left:50%;top:var(--rand,8px);
  height:calc(50% - var(--rand,8px));
  transform-origin:bottom center;
  transform:rotate(calc(360deg / var(--anzahl) * var(--i)));
  font-family:Anton,sans-serif;font-size:15px;line-height:1;
  letter-spacing:.02em;text-transform:uppercase;
}
@media only screen and (max-width:1200px){.kreis-text span{font-size:12px}}
@media only screen and (max-width:450px){.kreis-text span{font-size:10px}}
.kreis-pfeil{position:absolute;inset:0;display:grid;place-items:center;
  transition:transform .18s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .home-author__button:hover .kreis-pfeil{transform:translate(2px,-2px)}
}
@media (prefers-reduced-motion:reduce){
  .kreis-text{animation:none}
  .kreis-pfeil{transition:none}
}

/* Die Themen tragen jetzt ganze Wendungen statt Einzelwörter. Die
   140 px des Templates würden damit aus dem Raster laufen, deshalb eine
   mitwachsende Größe — auf dem Tablet schrumpft sie automatisch. */

/* Text auf dem dunklen Grund läuft durchgehend in Creme bei voller
   Deckkraft — das ist das Weiß dieser Marke. Vorher stand hier das
   gedämpfte Grau des Templates. */
.services__tab-desc,.about__skill-desc,.contacts__work-text,
.home-author__description{color:var(--cream)}

.blog__card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* --------------------------------------------------- Beitragsseite
   Weniger Luft oben und unten; die Schriftfarben der Hinweise standen
   zu dunkel auf dem dunklen Grund. */
.pflichthinweis-fuss,.body-share__title,.hero-description__title{color:var(--cream);opacity:.72}
.produkt-link a,.body-share__link,.hero-description__li--share{color:var(--amber)}
.body p,.body li,.body h2,.body h3,.hero__headline,.hero__text{color:var(--cream)}

/* --------------------------------------------------- Stand 04.09., zweite Runde

   Themen: kürzere Wendungen erlauben eine größere Schrift. Die Größe wächst
   mit der Fensterbreite — auf einem 27-Zoll-Monitor groß, auf einem 13-Zoll-
   Laptop von selbst kleiner. Die Obergrenze steht dort, wo die längste
   Zeile („Wohnung einrichten", 18 Zeichen) gerade noch in die linke Spalte passt. */
.services__card-name{font-size:clamp(28px,6.4vw,104px);line-height:1.0}
@media only screen and (max-width:1200px){.services__card-name{font-size:clamp(26px,7vw,64px)}}
@media only screen and (max-width:700px){.services__card-name{font-size:clamp(24px,8vw,42px)}}

/* Rechtstext-Links im Kontaktabschnitt in Creme wie der übrige Text. */
.contacts__private a{color:var(--cream)}
/* Der Unterstrich lag auf der Grundlinie und schnitt durch das p von
   "Impressum". Tiefer gelegt, so wie der Balken unter der E-Mail-Adresse,
   und ohne Aussparungen an den Unterlaengen. */
.contacts__private a:hover{text-underline-offset:.32em;
  text-decoration-thickness:1px;text-decoration-skip-ink:none}

/* Der Pfeil-Cursor über den Blogkacheln wird nicht gebraucht. */
.blog__swiper-container,.blog__swiper-container *,
.swiper-container2,.swiper-container2 *{cursor:auto!important}
.blog__card,.blog__card *{cursor:pointer!important}

/* --------------------------------------------------- Beitragsseite, Abstände
   Mehr Luft zwischen Kopf und Überschrift, weniger zwischen Bild und
   Werbehinweis, mehr vor dem Fuß. */
.hero{padding-top:220px;padding-bottom:64px}
@media only screen and (max-width:1559px){.hero{padding-top:180px;padding-bottom:48px}}
@media only screen and (max-width:900px){.hero{padding-top:140px;padding-bottom:40px}}
.hero__headline{margin-top:0}
.hero__text{margin-top:16px}
.pflichthinweis-fuss{margin-top:24px;margin-bottom:72px}
.m2footer{padding-top:24px;padding-bottom:48px}
.body{padding-bottom:0}

/* Abschnitte duerfen bei niedrigem Fenster intern scrollen (siehe main.js).
   Die eingebaute Leiste des Browsers bleibt dabei verborgen: macOS, iOS und
   Android zeigen sie nur waehrend des Scrollens als Overlay und geben ihr
   keine Breite - ein eingefaerbtes ::-webkit-scrollbar waere dort also die
   meiste Zeit unsichtbar. Stattdessen zeichnet main.js eine eigene Leiste,
   die auf jedem Geraet gleich aussieht und stehen bleibt. */
.section{scrollbar-width:none;-ms-overflow-style:none}
.section::-webkit-scrollbar{width:0;height:0;display:none}

/* Eigene Abschnittsleiste --------------------------------------------- */
.abschnitt-leiste{
  position:fixed;top:0;right:0;width:5px;
  height:100vh;height:100dvh;
  background-color:var(--near-black);
  opacity:0;transition:opacity .18s var(--ease-out);
  pointer-events:none;z-index:6;
}
.abschnitt-leiste.ist-da{opacity:1}
.abschnitt-leiste__griff{
  width:5px;border-radius:8px;background-color:var(--amber);
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){.abschnitt-leiste{transition:none}}

/* Kontaktabschnitt ----------------------------------------------------- */
/* Datenschutz/Impressum hingen an .section-main (Hoehe = Inhaltshoehe).
   Passt der Inhalt nicht ins Fenster, rutschen sie damit unter die Kante.
   Jetzt haengen sie am Abschnitt selbst, der immer genau fensterhoch ist. */
.section-main.contact{position:static}
.contacts__private{z-index:2}
/* Der Wrapper des orangenen Kreises lag als 506x200-Flaeche ueber den
   beiden Links - deshalb waren sie nicht anklickbar. Er reicht Klicks jetzt
   durch, nur der Kreis selbst faengt sie. */
.contacts__button-wrapper{overflow:visible;pointer-events:none}
.contacts__button{pointer-events:auto}

/* Beitragsseite: Abstaende -------------------------------------------- */
/* Der grosse Abstand ueber dem Bild kam nicht aus dem Hauptteil, sondern
   aus der linken Spalte (Thema/Datum/Teilen), die 144 px tiefer reichte.
   Also dort enger setzen statt am Hauptteil zu schrauben. */
.hero-description__item:not(:last-child){margin-bottom:32px}
.hero-description__title{margin-bottom:14px}
.hero{padding-bottom:96px}
@media only screen and (max-width:1559px){.hero{padding-bottom:80px}}
@media only screen and (max-width:900px){.hero{padding-bottom:56px}}
/* Gleicher Abstand unter dem Bild wie darueber. */
.body__image{margin-bottom:96px}
@media only screen and (max-width:900px){.body__image{margin-bottom:64px}}

/* Mehr Luft vor dem Teilen-Block und vor dem Fuss. */
.body-share{padding-top:72px}
.m2footer{padding-top:72px;padding-bottom:56px}

/* "Pinterest" stand 24 px eingerueckt unter "Teilen" - Listeneinzug raus. */
ul.body-share__list{padding-left:0;margin-bottom:16px}
.body-share__li,.body-share__li:not(:last-child){margin-top:0;margin-bottom:0}
.body-share__title{margin-bottom:20px}
.pflichthinweis-fuss{margin-top:20px;margin-bottom:0}

/* Fortschrittsbalken -------------------------------------------------- */
/* Stand im Template auf width:100% und lief beim Laden erst voll, bevor
   das Skript ihn auf ein Fuenftel zog. Startwert jetzt schon im CSS
   (und zusaetzlich inline im Markup), damit nichts aufblitzt. */
.nav-widget__line-active{width:20%}

/* Laufschrift im ersten Abschnitt ------------------------------------- */
/* Der Wrapper war auf feste 200 % gesetzt, die zwei Textkopien darin auf
   100 %. Die Breite der Kopie und die -50 % der Animation passten dadurch
   nicht exakt zusammen - am Schleifenpunkt sprang die Schrift. Jetzt
   bestimmt der Inhalt die Breite: zwei gleiche Kopien, -50 % ist damit
   genau eine Kopie. */
.home-ticker__wrapper{width:-webkit-max-content;width:max-content;
  animation-duration:30s;will-change:transform;backface-visibility:hidden}
.home-ticker .home-ticker__text{width:auto;flex:0 0 auto}

/* Datenschutz/Impressum feste Position -------------------------------- */
/* Ueber top statt bottom verankert: top misst vom oberen Rand des
   Abschnitts, der immer genau fensterhoch ist. bottom haette sich an der
   Inhaltshoehe orientiert, sobald der Abschnitt intern scrollt. */
.contacts__private{top:calc(100% - 75px);bottom:auto}
@media only screen and (max-width:768px){.contacts__private{top:calc(100% - 55px);bottom:auto}}
@media only screen and (max-width:620px){.contacts__private{top:calc(100% - 40px);bottom:auto}}

/* Kein Hover-Unterstrich unter Text, der kein Link ist. */
div.contacts__tel::after,div.contacts__tel:hover::after{display:none}
div.contacts__tel{cursor:default}

/* Beitragsseite: Anrisszeile ------------------------------------------ */
.hero__headline{text-transform:uppercase;margin-bottom:48px}
@media only screen and (max-width:900px){.hero__headline{margin-bottom:36px}}
.hero__text{margin-top:0}

/* Kontaktangaben ueber die volle Abschnittshoehe verteilen, damit die
   unterste Zeile auf derselben Linie endet wie Datenschutz/Impressum und
   die Anzeige unten rechts. Feste Abstaende taugten dafuer nicht: der
   Block ist inhaltsgross, der Abstand zur Unterkante wuchs also mit der
   Fensterhoehe (bei 1400 px waren es 334 px). Darum eine durchgehende
   Flex-Kette vom Abschnitt bis zu den drei Angaben. */
@media only screen and (min-width:1201px){
  .section-main.contact{
    height:100%;box-sizing:border-box;padding-bottom:50px;
    display:flex;flex-direction:column;
  }
  .contacts__container{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .contacts__row{flex:1 1 auto;min-height:0}
  .contacts__inner{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  /* Nicht die drei Angaben auseinanderziehen, sondern den ganzen Block nach
     unten schieben: so bleiben ihre Abstaende klein, "Folgen" bleibt auf
     einer Linie mit "Adresse", und die unterste Zeile endet weiter genau
     dort, wo Datenschutz/Impressum und die Anzeige unten rechts enden. */
  /* Fester Abstand von 100 px unter der Ueberschrift, unten bleibt der
     Block auf der Linie von Datenschutz/Impressum. Was dazwischen frei
     bleibt, verteilt sich auf die Luecken zwischen den drei Angaben -
     mindestens 40 px. */
  .contacts__wrapper{flex:1 1 auto;margin-top:100px;min-height:0}
  .contacts__contacts{flex:1 1 auto;justify-content:space-between;gap:40px;min-height:0}
  .contacts__contact,.contacts__contact:not(:last-child){margin-bottom:0}
  .contacts__title{margin-bottom:0}
}
@media only screen and (max-width:768px){
  .contacts__contact{margin-bottom:44px}
  .contacts__title{margin-bottom:48px}
}

/* Kontaktangaben: eine Stufe kleiner, damit die E-Mail-Adresse in eine Zeile
   passt - alle vier Angaben bleiben dabei in derselben Groesse. */
.contacts__contact-item,.contacts__follow-link{font-size:33px;line-height:1.2}
.contacts__mail{white-space:nowrap}
@media only screen and (max-width:1559px){
  .contacts__contact-item,.contacts__follow-link{font-size:27px}
}
@media only screen and (max-width:1200px){
  .contacts__contact-item,.contacts__follow-link{font-size:24px}
}
@media only screen and (max-width:700px){
  .contacts__contact-item,.contacts__follow-link{font-size:20px}
  .contacts__mail{white-space:normal;overflow-wrap:anywhere}
}

/* Einblenden der Abschnitte ------------------------------------------- */
/* Das Template laesst .container-main um 300 px nach oben fahren - mit
   600 ms Verzoegerung und 600 ms Dauer. Der Abschnittswechsel selbst
   dauert 700 ms, die Inhalte kamen also erst rund 1,2 s spaeter zur Ruhe.
   Genau das sah aus, als ruecke das Layout nachtraeglich zurecht.
   Jetzt: keine Bewegung, nur ein kurzes Aufblenden ohne Verzoegerung -
   die Inhalte stehen vom ersten Bild an an ihrem Platz. */
.container-main{
  transform:none!important;-webkit-transform:none!important;
  transition:opacity .35s ease!important;
  transition-delay:0s!important;
}

/* Der Teilen-Block hat frueher den Abstand zum Fuss erzeugt. Er ist raus,
   deshalb steht der Abstand jetzt eigenstaendig - und auf Beitrags- wie auf
   Rechtsseiten gleich gross. */
.body{padding-bottom:96px}
@media only screen and (max-width:900px){.body{padding-bottom:64px}}

/* Hover-Zustaende ------------------------------------------------------ */
/* Alles Anklickbare reagiert schon auf den Zeiger; Hamburger, Logo und die
   Blogkarten waren die drei Ausnahmen. Alle drei bleiben unter 250 ms und
   fassen nur Farbe bzw. transform an. */

/* Hamburger: die zwei Striche sind ::before/::after des inneren span. */
.header__burger span::before,
.header__burger span::after{transition:background-color .16s ease}

/* Logo: eine <img>-Datei laesst sich per CSS nicht umfaerben. Deshalb liegt
   dieselbe SVG als Maske ueber dem Bild - die Form kommt aus der Datei, die
   Farbe aus dem CSS. Das Bild bleibt fuer Screenreader im Markup. */
.header__logo{position:relative;display:inline-block}
.header__logo img{visibility:hidden}
.header__logo::after{
  content:"";position:absolute;inset:0;background-color:var(--cream);
  -webkit-mask:url(/theme/img/logo.svg) center/contain no-repeat;
          mask:url(/theme/img/logo.svg) center/contain no-repeat;
  transition:background-color .16s ease;
}

@media (hover:hover) and (pointer:fine){
  .header__burger:hover span::before,
  .header__burger:hover span::after{background-color:var(--amber)}
  .header__logo:hover::after{background-color:var(--amber)}

  /* Blogkarte: der Zeiger auf irgendeinem Teil der Karte - Bild, Datum oder
     Ueberschrift - laesst das Bild in seinem Rahmen aufziehen und faerbt die
     Ueberschrift. Die ganze Karte zu vergroessern ginge nicht: das Karussell
     schneidet an seinen Raendern ab, die erste und letzte Karte waeren
     angeschnitten. */
  .blog__card:hover .blog__card-img{transform:scale(1.05)}
  .blog__card:hover .blog__card-title{color:var(--amber)}
}

.blog__card-bild{display:block;overflow:hidden}
.blog__card-img{transition:transform .25s var(--ease-out)}
.blog__card-title{transition:color .16s ease}

@media (prefers-reduced-motion:reduce){
  .blog__card-img{transition:none}
  .blog__card:hover .blog__card-img{transform:none}
}


/* Links im Textteil (E-Mail im Impressum und in der Datenschutzerklaerung).
   Sie waren bisher die einzigen Links ohne sichtbare Reaktion. */
.body a{color:var(--amber);text-decoration:none;
  text-underline-offset:.28em;transition:text-decoration-color .16s ease;
  text-decoration-color:transparent;text-decoration-line:underline;
  text-decoration-thickness:1px;text-decoration-skip-ink:none}
@media (hover:hover) and (pointer:fine){
  .body a:hover{text-decoration-color:currentColor}
}
.body a:focus-visible{text-decoration-color:currentColor;outline:2px solid var(--amber);outline-offset:3px}
/* Auf Impressum und Datenschutz soll die E-Mail-Adresse nicht als farbiger
   Link auffallen - sie steht dort als Angabe, nicht als Angebot. Sichtbar
   wird sie erst beim Ueberfahren, dann als Unterstrich. */
.seite-recht .body a{color:inherit}
/* Die Produktlinks in Beitraegen bringen ihre eigene Regel mit. */
.body .produkt-link a{text-decoration-line:underline;text-decoration-color:transparent}

/* ====================================================================
   Korrekturen 05.09. - Handy und Tablet
   ==================================================================== */

/* Kreis im ersten Abschnitt: Buchstaben eine Spur kraeftiger, damit der
   Ring nicht ausgefranst wirkt. 27 Zeichen auf 628 px Umfang lassen rund
   23 px je Zeichen - Anton braucht bei 18 px etwa 10 px. */
.kreis-text span{font-size:18px}
/* Das Template kappt den Knopf per overflow:hidden, und der Buchstabenring
   hatte genau den halben Kastendurchmesser - die Oberlaengen von Anton
   ragten darueber hinaus und standen oben angeschnitten. Der Ring rueckt
   jetzt um --rand nach innen; overflow:visible bleibt als Sicherung. */
.home-author__button{overflow:visible}
.kreis-text{--rand:10px}
@media only screen and (max-width:1200px){.kreis-text{--rand:8px}}
@media only screen and (max-width:450px){.kreis-text{--rand:6px}}

/* Der Kreis stand ueber 1900 px Fensterbreite fest 290/282 px vom Rand des
   Inhaltsrahmens - also weit oben, dicht an der Laufschrift, waehrend die
   rechte untere Ecke leer blieb. Jetzt sitzt er 30 px ueber der Anzeige-
   linie unten rechts und buendig mit deren rechtem Ende (70 px vom
   Fensterrand). Ueber 1920 px ist der Inhaltsrahmen gedeckelt und mittig,
   deshalb dort der Ausgleich um die halbe Differenz. */
@media only screen and (min-width:1201px){
  .home-author__button{right:70px;bottom:96px}
}
@media only screen and (min-width:1921px){
  .home-author__button{right:calc(70px - (100vw - 1920px) / 2)}
}
@media only screen and (max-width:1200px){.kreis-text span{font-size:14px}}
@media only screen and (max-width:450px){.kreis-text span{font-size:11px}}

/* Der erste Abschnitt lief auf dem Handy 131 px ueber die Fensterhoehe
   hinaus, der Kreis stand dadurch halb unter der Kante. Bild und Innen-
   abstand schrumpfen mit der Fensterhoehe, statt fest zu stehen. */
@media only screen and (max-width:600px){
  /* 20 px mehr Abstand nach oben - dieselben 20 px weniger Hoehe, damit der
     Abschnitt nicht laenger wird als vorher. */
  .home-image{height:calc(38vh - 20px);min-height:180px;
    margin-top:calc(96px + 3vh)}
  .home-author{padding-bottom:116px}
}
/* Zwischen 451 und 600 px (Surface Duo hochkant) ist die Kopfzeile 76 statt
   58 px hoch - das Bild lag deshalb ueber der Laufschrift. Ausserdem stand
   der Kreis mitten im Text, weil beide dieselbe Ecke belegten. */
@media only screen and (min-width:451px) and (max-width:600px){
  .home-image{margin-top:calc(100px + 3vh)}
  /* Etwas kleinere Wortmarke, damit zwischen ihr und dem Text Luft bleibt. */
  .home-author__name{font-size:52px}
  .home-author__description{margin-top:-5px}
  .home-author__button{right:24px;bottom:10px}

  /* Blogabschnitt: das Kartenbild war 470 px hoch, damit lief der Abschnitt
     ueber und die Pfeile standen halb unter der Kante. */
  .blog__card-img{height:280px;width:100%;object-fit:cover}
  .blog__row .swiper-button-wrapper{margin-top:24px}

}


/* Blog: Pfeile auch auf Handy und Tablet ------------------------------
   Im Template sitzen sie absolut oben rechts und werden unter 1000 px
   ausgeblendet - dort ist oben rechts kein Platz. Unter dem Karussell
   ist er da, also laufen sie ab da im normalen Fluss mit. */
@media only screen and (max-width:1000px){
  /* Unter den Kacheln, linksbuendig. Der Abstand nach oben entspricht dem
     zwischen Ueberschrift und Kacheln (40 px), damit der Abschnitt eine
     Sprosse behaelt. */
  .blog__row .swiper-button-wrapper{
    display:flex!important;position:static;
    /* Die Knoepfe bringen selbst 10 px Aussenabstand mit, deshalb gap:0 -
       das ergibt dieselbe Luecke wie auf dem Desktop. Der Abstand nach oben
       zaehlt ab der hoechsten Kachel: bei zweizeiliger Ueberschrift ist die
       Kachel rund 29 px hoeher, sonst blieben dort nur 11 px. */
    justify-content:flex-start;gap:0;margin-top:40px;
  }
  .blog__row .swiper-button-prev2 svg,
  .blog__row .swiper-button-next2 svg{width:46px;height:46px}
}
/* Auf dem Handy wirkten 50 px zu wuchtig - der Kreis ist dort kleiner als
   die Mindestgroesse fuer Finger, deshalb liegt die Trefferflaeche als
   unsichtbares Feld darunter. */
@media only screen and (max-width:600px){
  .blog__row .swiper-button-prev2 svg,
  .blog__row .swiper-button-next2 svg{width:40px;height:40px}
  .blog__row .swiper-button-wrapper{gap:0;margin-top:32px}
}
@media only screen and (max-width:600px) and (pointer:coarse){
  .blog__row .swiper-button-prev2,
  .blog__row .swiper-button-next2{position:relative}
  .blog__row .swiper-button-prev2::before,
  .blog__row .swiper-button-next2::before{
    content:"";position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%);
  }
}

/* Rechtsseiten: leere Anrisszeilen ------------------------------------
   Impressum und Datenschutz fuellen die beiden Anrissabsaetze nicht, ihre
   Aussenabstaende blieben aber stehen und rissen die Luecke zwischen
   Ueberschrift und Bild auf. */
.hero__headline:empty,.hero__text:empty{display:none;margin:0}
/* Unter der H1 steht im Template ein Abstand von 65 px (Handy) bzw. 99 px
   (Tablet) - er ist fuer die Anrisszeile gedacht, die es hier nicht gibt. */
@media only screen and (max-width:900px){
  .seite-recht .hero{padding-bottom:24px}
  .seite-recht .hero__title{margin-bottom:16px}
}
/* Auf Laptopbreiten 20 px weniger zwischen Ueberschrift und Bild. */
@media only screen and (min-width:901px) and (max-width:1600px){
  .seite-recht .hero{padding-bottom:60px}
}

/* Fusszeile: weniger Luft unter der Navigation ------------------------
   Nur auf Handy und Tablet ganz knapp; auf dem Desktop 15 px mehr. */
.m2footer{padding-bottom:43px}
@media only screen and (max-width:1000px){.m2footer{padding-bottom:28px}}

/* Kontaktabschnitt auf dem Handy --------------------------------------
   Der Knopf hatte in jeder Groesse 200 px und stand halb unter der
   Fensterkante. Das Template verkleinert seinen Kreis ab 1000 px auf 150
   und ab 450 px auf 120 px - dieselben Stufen hier, dazu eine Flex-Kette,
   die den Knopf an den unteren Rand zieht, knapp ueber Datenschutz und
   Impressum. */
@media only screen and (max-width:1000px){
  .contacts__button{width:150px;height:150px}
  .contacts__button-label{font-size:20px}
}
@media only screen and (max-width:450px){
  .contacts__button{width:120px;height:120px}
  .contacts__button-label{font-size:16px}
}
@media only screen and (max-width:1200px){
  .section-main.contact{
    height:100%;box-sizing:border-box;padding-bottom:72px;
    display:flex;flex-direction:column;
  }
  .contacts__container{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  /* Im Quelltext steht die Knopfspalte zuerst; das Template dreht sie per
     column-reverse nach unten. Hier stattdessen normale Richtung plus
     order - dann schiebt margin-top:auto den Knopf an die Unterkante, und
     falls der Inhalt einmal nicht passt, laeuft er unten heraus (der
     Abschnitt scrollt) statt oben unter den Kopf zu rutschen. */
  /* Der freie Platz sammelte sich komplett zwischen E-Mail und Satz - auf
     einem hochkant gehaltenen iPad waren das ueber 400 px Loch, waehrend
     die Ueberschrift direkt unter dem Kopf klebte. Statt eines einzigen
     auto-Abstands jetzt zwei dehnbare Felder: oben bekommt es zwei Drittel,
     die Mitte ein Drittel. Beide schrumpfen bis auf null, damit auf
     niedrigen Geraeten nichts unter den Kopf rutscht. */
  .contacts__row{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .contacts__row::before{content:"";display:block;order:0;
    -ms-flex:5 1 0px;flex:5 1 0;min-height:0}
  .contacts__column:last-child{order:1;margin-bottom:0}
  .contacts__row::after{content:"";display:block;order:2;
    -ms-flex:4 1 0px;flex:4 1 0;min-height:32px}
  .contacts__column:first-child{order:3;margin-top:0;margin-bottom:0}
  .contacts__button-wrapper{justify-content:flex-end}
  .contacts__work{margin-bottom:24px}
  /* Abstand zwischen den drei Angaben und dem Block "Folgen", der
     ausserhalb von .contacts__contacts steht. */
  .contacts__contacts{margin-bottom:28px}
  .contacts__contact{margin-bottom:28px}
  .contacts__contact:last-child{margin-bottom:0}
  .contacts__title{margin-bottom:32px}
  /* Der Satz brach unausgeglichen um (536/187 px auf dem iPad Mini).
     text-wrap:balance verteilt die Woerter gleichmaessig auf die Zeilen;
     aeltere Browser ignorieren die Zeile und brechen wie bisher um. */
  .contacts__work-text{text-wrap:balance}
}
/* Auf niedrigen Geraeten darf auch der Mindestabstand weichen, sonst
   waechst der Abschnitt ueber die Fensterhoehe hinaus. */
@media only screen and (max-width:1200px) and (max-height:700px){
  .contacts__row::after{min-height:0}
}
/* Die Anzeigelinie unten rechts (1/5) gehoert zum Desktop-Layout und soll
   an derselben Stelle verschwinden, an der sich das Layout ohnehin umstellt.
   Das Template blendet sie erst unter 1001 px aus, hier ab 1200 px abwaerts.
   Bewusst visibility statt display: die Lage bleibt messbar, damit die
   senkrechte Ausrichtung des Kreises im ersten Abschnitt weiter dieselbe
   Unterkante benutzt wie auf dem Desktop. */
@media only screen and (max-width:1200px){
  .nav-widget__wrapper{visibility:hidden}
}
/* Ab 1001 px blendet das Template die Anzeigelinie unten rechts wieder ein.
   Der Schreib-mir-Kreis stand dort nur 30 px darueber - auf dem Desktop
   sitzt er neben der Linie, hier genau ueber ihr. Etwas mehr Fusszeile. */
@media only screen and (min-width:1001px) and (max-width:1200px) and (min-height:900px){
  .section-main.contact{padding-bottom:92px}
}
/* Tablet QUER (iPad Mini 1024x768, iPad Air 1180x820): breit genug fuer das
   Tablet-Layout, aber nur rund 800 px hoch - der Abschnitt lief dort ueber
   200 px ueber die Fensterhoehe, der Abschnitt scrollte, und Impressum und
   Datenschutz klebten am Text statt am unteren Rand. Dieselbe Verdichtung
   wie auf dem Handy, dazu der kleinere Kreis aus dem Tablet-Layout. */
@media only screen and (min-width:769px) and (max-width:1200px) and (max-height:900px){
  .section-main.contact{padding-top:96px;padding-bottom:96px}
  /* Quer sitzt die Ueberschrift hoeher: der obere Dehnbereich bekommt nur
     noch zwei statt fuenf Anteile, dafuer steht unter der Ueberschrift
     doppelt so viel Platz. */
  .contacts__row::before{-ms-flex:2 1 0px;flex:2 1 0}
  .contacts__title{margin-bottom:48px}
  .contacts__contact-item,.contacts__follow-link{font-size:22px}
  /* Quer ist Breite da und Hoehe knapp: die drei Angaben stehen deshalb
     nebeneinander statt untereinander - das spart rund 250 px Hoehe. Die
     Vorlage setzt hier flex-direction:column und eine Breite von 70 %,
     beides muss ausdruecklich zurueckgenommen werden. */
  /* Alle vier Angaben in EINER Reihe mit demselben Abstand: der Block der
     drei Kontaktangaben darf nicht mehr wachsen, sonst wird "Folgen" an den
     rechten Rand gedrueckt und der letzte Abstand ist groesser als die
     anderen. Wrapper und Block benutzen dieselbe Luecke. */
  .contacts__wrapper{-ms-flex-align:start;align-items:flex-start;
    -ms-flex-wrap:wrap;flex-wrap:wrap;gap:24px 40px}
  .contacts__contacts{display:-ms-flexbox;display:flex;
    -ms-flex-direction:row;flex-direction:row;
    -ms-flex-wrap:wrap;flex-wrap:wrap;
    width:auto;-ms-flex:0 1 auto;flex:0 1 auto;
    gap:24px 40px;margin-bottom:0}
  .contacts__contact,.contacts__contact:not(:last-child){
    margin-bottom:0;max-width:none;-ms-flex:0 1 auto;flex:0 1 auto}
  .contacts__follow{-ms-flex:0 0 auto;flex:0 0 auto;width:auto}
  .contacts__work{margin-bottom:16px}
  .contacts__button{width:150px;height:150px}
  .contacts__button-label{font-size:20px}
}

/* Niedrige Fenster (Handy quer, kleine Geraete): eine Stufe enger, damit
   der Knopf nicht unter die Kante rutscht. */
@media only screen and (max-width:768px) and (max-height:730px){
  .contacts__contact-item,.contacts__follow-link{font-size:22px}
  .contacts__contact{margin-bottom:10px}
  .contacts__contacts{margin-bottom:16px}
  .contacts__title{margin-bottom:14px}
  .contacts__work{margin-bottom:10px}
  .section-main.contact{padding-top:60px;padding-bottom:56px}
}
/* Ab 451 px Fensterbreite ist die Kopfzeile 76 statt 58 px hoch, der
   Innenabstand der Abschnitte blieb aber bei 72 px - die oberste orange
   Ueberschrift lief dadurch unter das Logo. */
@media only screen and (min-width:451px) and (max-width:1200px){
  .section-main.about,.section-main.services,.section-main.blog{
    padding-top:96px}
}
@media only screen and (min-width:451px) and (max-width:768px) and (max-height:730px){
  .section-main.contact{padding-top:96px}
}

/* Das Template gibt dem ersten Abschnitt unter 992 px eine feste
   Mindesthoehe von 960 px. Auf Geraeten, die niedriger sind, ragt er
   dadurch unter die Fensterkante - genau der leere Streifen unten.
   Der Abschnitt ist immer genau so hoch wie sein pagePiling-Rahmen. */
@media only screen and (max-width:992px){
  .home{min-height:100%}
}

/* Pfeil im Produktlink faehrt beim Ueberfahren ein Stueck nach rechts. */
/* Das Leerzeichen steckt als geschuetztes Leerzeichen in der Huelle: ein
   normales wuerde am Anfang eines inline-block wegfallen und der Pfeil
   ruecke naeher an den Text. */
.produkt-pfeil{display:inline-block;will-change:transform;
  transition:transform .18s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .produkt-link a:hover .produkt-pfeil{transform:translateX(7px)}
}
@media (prefers-reduced-motion:reduce){.produkt-pfeil{transition:none}}

/* Kontaktabschnitt auf kleinen Laptops (13"/15") ------------------------
   Bei 1280x800 stiess die E-Mail-Zeile 4 px unter die Grundlinie und der
   Knopf klebte an Datenschutz/Impressum. Eine Stufe kleiner, und die
   Textspalte rueckt nach rechts, damit der Abstand Knopf-Text so gross ist
   wie der Abstand Text-Anzeigelinie. */
@media only screen and (min-width:1201px) and (max-width:1600px){
  .contacts__button{width:170px;height:170px}
  .contacts__button-label{font-size:22px}
  .contacts__contact-item,.contacts__follow-link{font-size:28px}
}
/* Die Textspalte rueckt nach rechts, bis die Luecke Knopf-Text so gross ist
   wie die Luecke Text-Anzeigelinie. Wie weit, haengt an der Fensterbreite:
   die E-Mail-Zeile ist gleich breit, der Platz daneben nicht. */
@media only screen and (min-width:1321px) and (max-width:1420px){
  .contacts__column:first-child{width:calc(44%)}
}
@media only screen and (min-width:1421px) and (max-width:1600px){
  .contacts__column:first-child{width:calc(47%)}
}
/* Ganz schmale Laptops: die E-Mail-Zeile stiess sonst in die Anzeigelinie. */
@media only screen and (min-width:1201px) and (max-width:1320px){
  .contacts__contact-item,.contacts__follow-link{font-size:26px}
}

/* ====================================================================
   Korrekturen 06.09.
   ==================================================================== */

/* Erster Abschnitt sofort sichtbar -------------------------------------
   Das Template startet Ueberschrift und Bild mit opacity:0 und blendet sie
   mit 0,6 s Verzoegerung und 0,6 s Dauer ein - bis zu 1,2 s Leere beim
   ersten Aufruf und bei jeder Rueckkehr zum Abschnitt. */
.home-author__name,.home-image{
  opacity:1;
  transition:none;
  -webkit-transition:none;
  transition-delay:0s;
  -webkit-transition-delay:0s;
}

/* Abstaende auf Beitrags- und Rechtsseiten ----------------------------
   Auf allen drei Seiten derselbe Abstand vom Kopf zur ersten Ueberschrift,
   und zwar 20 px mehr als der Abstand von der Ueberschrift zum Bild auf der
   Beitragsseite (88 px). Der Kopf ist 106 px hoch, also 106 + 108 = 214 px
   Innenabstand oben. */
@media only screen and (min-width:901px){
  /* Kopf 106 px hoch, danach 68 px bis zur Ueberschrift. */
  .hero{padding-top:174px}
  /* Impressum und Datenschutz: 20 px mehr Luft unter der Ueberschrift als
     im Beitrag. Der Aussenabstand der H1 traegt ihn allein, der
     Innenabstand der Kopfzone faellt weg (die beiden leeren Anrissabsaetze
     stehen ohnehin auf display:none). */
  .seite-recht .hero{padding-bottom:0}
  .seite-recht .hero__title{margin-bottom:108px}
}

/* 404-Seite ------------------------------------------------------------
   Genau fensterhoch: Ueberschrift oben wie bei Impressum und Datenschutz,
   Text und Knopf in der Mitte, Fusszeile am unteren Rand. Kein Bild. */
.seite-404{min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column}
.seite-404 .main{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.seite-404 .hero{flex:0 0 auto}
.seite-404 .hero__title{margin-bottom:0}
.fehler{flex:1 1 auto;display:flex;align-items:center;min-height:0;
  padding:32px 0}
/* Die Ueberschrift steht oben, die Fusszeile unten - mittig im Rest liegt
   der Block etwas unter der Fenstermitte. Der zusaetzliche Fussabstand
   holt ihn nach oben; gedeckelt, damit auf niedrigen Fenstern nichts
   herauslaeuft. */
@media only screen and (min-width:901px){
  .fehler{padding-bottom:min(12vh,160px)}
}
/* Niedrige Desktopfenster: Kopfabstand, Block und Fusszeile eine Stufe
   enger, damit die Seite auch dort ohne Scrollen auskommt. Auf normal
   hohen Fenstern greift die Regel nicht, dort bleiben die 88 px stehen. */
@media only screen and (min-width:901px) and (max-height:780px){
  .seite-404 .hero{padding-top:calc(106px + 6vh)}
  .fehler{padding-top:16px;padding-bottom:min(7vh,80px)}
  .seite-404 .m2footer{padding-top:6vh;padding-bottom:4vh}
}
.fehler .m2container{width:100%}
.fehler__inhalt{max-width:560px;margin:0 auto;text-align:center}
.fehler__text{font-family:Archivo,sans-serif;font-size:20px;line-height:160%;
  color:var(--cream);margin:0 0 32px}
@media only screen and (max-width:1559px){.fehler__text{font-size:18px}}
@media only screen and (max-width:700px){.fehler__text{font-size:16px}}
.fehler__knopf{display:inline-flex;align-items:center;
  background:var(--amber);color:var(--near-black);
  font-family:Anton,sans-serif;text-transform:uppercase;letter-spacing:.02em;
  font-size:20px;line-height:1;padding:20px 34px;border-radius:999px;
  text-decoration:none;
  transition:box-shadow .18s var(--ease-out)}
@media only screen and (max-width:700px){
  .fehler__knopf{font-size:17px;padding:17px 28px}
}
@media (hover:hover) and (pointer:fine){
  .fehler__knopf:hover{box-shadow:0 0 36px 6px rgba(255,122,46,.42)}
}
.fehler__knopf:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
/* Links steht nichts, die Fusszeilen-Navigation rueckt nach rechts. */
.seite-404 .m2footer-wrapper{justify-content:flex-end}
.seite-404 .m2footer{flex:0 0 auto}

/* Abschnitt 2: Text rechts mittig zum Bild ------------------------------
   Der Text teilt sich im Raster die Zeilen mit dem Bild, das Bild ragt
   aber um 70 px darueber hinaus und ist mit 84,25926vh unabhaengig hoch.
   Auf niedrigen Fenstern endete es deshalb deutlich ueber dem Rasterende,
   waehrend der Text bis zur Unterkante lief - und dort in die Anzeigelinie.
   Der Textkasten bekommt jetzt genau die Lage und Hoehe des Bildes und
   zentriert seinen Inhalt darin. */
@media only screen and (min-width:1201px){
  .about__work-info{
    align-self:start;
    margin-top:-70px;
    height:84.25926vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
}

/* Laptopbreiten: die Breite von Textblock und Knopf im Kontaktabschnitt
   setzt das Skript (kontaktSetzen). Sie haengt davon ab, wo die E-Mail-
   Zeile beginnt, und das weiss CSS nicht. */

/* Fehlerseite: unter 1600 px ist die Schrift eine Stufe kleiner, dadurch
   lief die erste Zeile fast ueber die volle Kastenbreite und die zweite
   endete als kurzer Rest. Schmalerer Kasten, zwei gleich lange Zeilen. */
/* Ab 601 px ist die Schrift 18 px gross; bei 560 px Kastenbreite lief die
   erste Zeile fast voll und die zweite blieb ein Rest. Gilt deshalb auch
   fuer Tablets, nicht erst ab 901 px. */
@media only screen and (min-width:601px) and (max-width:1599px){
  .fehler__inhalt{max-width:440px}
}

/* ====================================================================
   Tablet und Handy - Bedienbarkeit
   ==================================================================== */

/* Grosse Finger, kleine Links: die Trefferflaechen waren 20 bis 40 px hoch,
   empfohlen sind 44. Vergroessert wird ueber ein unsichtbares Pseudoelement,
   nicht ueber Innenabstand - so aendert sich am fertigen Layout nichts.
   Waagerecht bleibt die Flaeche auf den Link begrenzt, damit Nachbarlinks
   sich nicht gegenseitig die Klicks wegnehmen. */
@media only screen and (max-width:1200px) and (pointer:coarse){
  .header__menu-link,
  .header__links a,
  .contacts__private a,
  .m2footer-navbar__link,
  .m2footer__top,
  .produkt-link a,
  .body a,
  .header__logo,
  .contacts__mail,
  .contacts__follow-link{position:relative}
  /* ::before, nicht ::after: die Vorlage zeichnet den aktiven Menuepunkt
     ueber .header__menu-link::after als 2 px hohen Balken. Ueberschreibt man
     den mit 44 px Hoehe, wird daraus ein Block, der das Wort verdeckt. */
  .header__menu-link::before,
  .header__links a::before,
  .contacts__private a::before,
  .m2footer-navbar__link::before,
  .m2footer__top::before,
  .produkt-link a::before,
  .body a::before,
  .header__logo::before,
  .contacts__mail::before,
  .contacts__follow-link::before{
    content:"";position:absolute;left:0;right:0;top:50%;
    height:44px;transform:translateY(-50%);
  }
  /* Das Logo ist schmaler als hoch gedacht - waagerecht mitwachsen lassen,
     ohne die Nachbarn zu erreichen (Burger links, Kopflinks rechts). */
  .header__logo::before{left:-8px;right:-8px}
}

/* Unter 450 px setzte die Vorlage die Beschriftungen auf 11 px - unter der
   Grenze, ab der Text auf dem Handy noch bequem lesbar ist. */
@media only screen and (max-width:450px){
  .manrope-text2{font-size:13px}
}

/* Blogkarussell: die grosse Karte auch auf kleinen Schirmen zeigen -----
   Die Vorlage blendet .blog__swiper-slide-xl unter 1000 px aus - dort war
   das nur eine Schmuckkachel. Bei uns steht auf dieser Kachel der neueste
   echte Beitrag: auf Tablet und Handy war er dadurch gar nicht zu sehen,
   das Karussell zeigte nur Platzhalter. Sie laeuft jetzt unter 1000 px als
   normale Kachel mit, in derselben Breite wie die kleinen. */
@media only screen and (max-width:1000px){
  .blog__swiper-slide-xl{display:block}
  .blog__card-md{max-width:324px}
}
@media only screen and (max-width:768px){
  .blog__card-md{max-width:300px}
}
@media only screen and (max-width:450px){
  .blog__card-md{max-width:200px}
}

/* Blogkachel: zuschneiden statt stauchen ------------------------------
   Die Vorlage setzt object-fit:fill. Auf dem Desktop faellt das nicht auf,
   weil die grosse Kachel fast das Seitenverhaeltnis des Bildes hat. Auf
   Tablet und Handy wird dieselbe Kachel schmal und hoch - ein Querformat
   wurde dort auf 200x300 zusammengezogen. */
@media only screen and (max-width:1000px){
  .blog__card-img{object-fit:cover;object-position:center}
}

/* Tablet: Fusszeile und Rechtsseiten ----------------------------------
   Der Abstand unter der Fusszeilen-Navigation entspricht jetzt dem, den
   Datenschutz/Impressum im Kontaktabschnitt zur Unterkante haben - dort
   sind es 50 px ab 769 px Breite und 35 px darunter. */
@media only screen and (min-width:769px) and (max-width:1024px){
  .m2footer{padding-bottom:50px}
}
@media only screen and (min-width:621px) and (max-width:768px){
  .m2footer{padding-bottom:35px}
}
/* Etwas mehr Luft zwischen Ueberschrift und Bild auf dem Tablet
   (vorher 40 px, auf dem Desktop sind es 108). */
@media only screen and (min-width:601px) and (max-width:900px){
  .seite-recht .hero__title{margin-bottom:60px}
}

/* Beitragsseite: Spalte "Thema / Datum" --------------------------------
   Die Vorlage gibt der Spalte keine eigene Breite - sie ist der Rest neben
   der festen Textspalte und schrumpft bis auf ihr laengstes Wort. Dadurch
   war sie mal 154 px breit (Thema dreizeilig, Datum vierzeilig, obwohl
   rechts Platz war) und mal 224 px (Thema einzeilig, dafuer klebte es auf
   dem Tablet fast am Text). Jetzt hat sie eine feste Breite: Thema und
   Datum stehen dadurch auf jeder Groesse zweizeilig. Die Textspalte
   daneben bleibt unberuehrt - sie ist rechtsbuendig und behaelt ihre
   eigene Breite. */
@media only screen and (min-width:621px){
  .hero .m2container-body__aside{
    -ms-flex:1 1 auto;flex:1 1 auto;
    width:auto;max-width:none;min-width:0;
    margin-right:0;
    padding-right:64px;box-sizing:border-box;
  }
}
@media only screen and (min-width:621px) and (max-width:1024px){
  .hero .m2container-body__aside{padding-right:40px}
}

/* ====================================================================
   Handy und kleine Tablets QUER (Surface Duo 720x540, iPhone quer,
   alles unter 561 px Fensterhoehe)
   --------------------------------------------------------------------
   Zwei Abschnitte sind hier gebaut wie fuer ein hohes Fenster und liefen
   deshalb 250 bis 400 px ueber die Kante: der erste Abschnitt wegen des
   Bildes mit fester Hoehe (430 px plus 127 px Abstand nach oben), die
   Kontaktseite wegen der gestapelten Anordnung. Quer ist Breite da und
   Hoehe knapp - also schrumpft das Bild mit der Fensterhoehe, und der
   Kontaktabschnitt stellt sich auf zwei Spalten um wie auf dem Desktop.
   ==================================================================== */
@media only screen and (max-width:1200px) and (max-height:560px) and (orientation:landscape){
  /* --- Erster Abschnitt --- */
  /* Das Bild hing an festen 430 px plus 127 px Abstand - quer war es damit
     hoeher als das ganze Fenster. Der Abstand nach oben haelt die Laufzeile
     frei (sie endet bei 113 px), die Hoehe haengt jetzt am Fenster. */
  .home-image{height:26vh;min-height:88px;margin-top:124px}
  .home-author{padding-top:12px;padding-bottom:16px}
  /* Ueberschrift links, Text daneben, Kreis rechts auf halber Hoehe: quer
     nebeneinander, sonst lag der Kreis mitten im Text. */
  .home-author__name{font-size:42px;line-height:1.02;max-width:34%}
  .home-author__description{font-size:13px;line-height:1.45;
    max-width:30%;margin-right:20%}
  .home-author__button{width:96px;height:96px;right:4%;
    bottom:auto;top:50%;margin-top:-48px}
  .kreis-text{--rand:6px}
  .kreis-text span{font-size:10px}

  /* --- Kontaktabschnitt: zwei Spalten statt gestapelt --- */
  .section-main.contact{padding-top:88px;padding-bottom:40px}
  .contacts__row{-ms-flex-direction:row;flex-direction:row;
    -ms-flex-align:stretch;align-items:stretch;gap:40px}
  .contacts__row::before,.contacts__row::after{display:none}
  .contacts__column:first-child{-ms-flex-order:0;order:0;
    -ms-flex:1 1 40%;flex:1 1 40%;min-width:0}
  .contacts__column:last-child{-ms-flex-order:1;order:1;
    -ms-flex:1 1 60%;flex:1 1 60%;min-width:0}
  .contacts__title{font-size:30px;line-height:1.1;margin-bottom:16px}
  /* Unter 768 px stellt die Vorlage den Wrapper auf Spalte und "Folgen"
     auf volle Breite - quer bleibt beides nebeneinander. */
  .contacts__wrapper{gap:16px 32px;-ms-flex-direction:row;flex-direction:row}
  .contacts__follow{width:auto;-ms-flex:0 0 auto;flex:0 0 auto;margin-bottom:0}
  .contacts__contacts{-ms-flex-direction:column;flex-direction:column;
    -ms-flex:1 1 auto;flex:1 1 auto;width:auto;gap:12px}
  .contacts__contact,.contacts__contact:not(:last-child){margin-bottom:0}
  .contacts__contact-title{font-size:12px;margin-bottom:2px}
  .contacts__contact-item,.contacts__follow-link{font-size:18px;line-height:1.25}
  /* Der Satz stand am unteren Ende der linken Spalte und lag damit ueber
     Impressum und Datenschutz - quer beginnt er oben, auf Hoehe der
     Ueberschrift. */
  .contacts__column:first-child{-ms-flex-pack:start;justify-content:flex-start}
  .contacts__work{margin-top:0;margin-bottom:0;
    -ms-flex-pack:start;justify-content:flex-start}
  .contacts__work-text{font-size:13px;line-height:1.45;margin-bottom:16px}
  /* Der Kreis sass am unteren Ende der linken Spalte - also genau ueber
     Impressum und Datenschutz. Quer sitzt er deshalb unten rechts, wie in
     allen anderen Groessen auch. */
  .contacts__row{position:relative}
  .contacts__button-wrapper{position:absolute;right:0;bottom:0;
    margin:0;width:auto}
  .contacts__button{width:110px;height:110px}
  .contacts__button-label{font-size:15px}
}

/* Sehr schmal und quer (iPhone SE, Surface Duo): eine Stufe kleiner, damit
   Ueberschrift, Text und Kreis nebeneinander passen. */
@media only screen and (max-width:700px) and (max-height:560px) and (orientation:landscape){
  .home-author__name{font-size:32px;max-width:30%}
  .home-author__description{font-size:12px;max-width:28%;margin-right:18%}
  .home-author__button{width:84px;height:84px;margin-top:-42px}
}

/* Quer, aber nicht ganz so flach (Surface Duo 720x540): das Bild darf
   hoeher sein, sonst bleibt das untere Drittel leer. */
@media only screen and (max-width:1200px) and (min-height:481px) and (max-height:560px) and (orientation:landscape){
  .home-image{height:34vh}
}

/* Sehr flache Fenster (iPhone SE quer 568x320, Surface Duo 740x360): noch
   eine Stufe enger, damit beide Abschnitte ohne Scrollen passen. */
@media only screen and (max-width:1200px) and (max-height:400px) and (orientation:landscape){
  .section-main.contact{padding-top:80px;padding-bottom:24px}
  .contacts__title{font-size:26px;margin-bottom:12px}
  .contacts__contact-item,.contacts__follow-link{font-size:16px}
  .contacts__contacts{gap:8px}
  .contacts__button{width:88px;height:88px}
  .contacts__button-label{font-size:13px}
}
@media only screen and (max-width:600px) and (max-height:400px) and (orientation:landscape){
  .home-image{min-height:64px}
  .home-author__name{font-size:28px}
  .home-author__description{font-size:11px}
}

/* Kontaktabschnitt zwischen 451 und 600 px (Surface Duo hochkant):
   "Folgen" neben die Angaben statt darunter, kleinerer Kreis mit Abstand
   zur rechten Kante - sonst lief der Abschnitt ueber, der Kreis stand halb
   unter der Kante und Impressum und Datenschutz rutschten mit dem Inhalt
   nach oben. Steht bewusst hinter den 1000-px-Regeln, sonst gewinnen die.
   Nur hochkant - quer gelten die Querformat-Regeln weiter oben. */
@media only screen and (min-width:451px) and (max-width:600px) and (min-height:561px){
  .contacts__wrapper{-ms-flex-direction:row;flex-direction:row;gap:16px 32px}
  .contacts__contacts{-ms-flex:1 1 auto;flex:1 1 auto;margin-bottom:12px}
  .contacts__follow{width:auto;-ms-flex:0 0 auto;flex:0 0 auto}
  .contacts__contact-item,.contacts__follow-link{font-size:20px}
  .contacts__work-text{margin-bottom:16px}
  .contacts__button{width:120px;height:120px}
  .contacts__button-label{font-size:16px}
  .contacts__button-wrapper{margin-right:24px}
  .section-main.contact{padding-bottom:76px}
}
/* ====================================================================
   Unterseiten auf Handys hochkant (bis 600 px)
   ==================================================================== */
@media only screen and (max-width:619px){
  /* Abstand unter dem Logo war 140 px - halbiert. Die Kopfzeile ist bis
     450 px 58 px hoch, darueber 76 px, daher zwei Werte. */
  .hero{padding-top:100px}
  /* Fusszeile: alle Links linksbuendig untereinander, gleiche Abstaende.
     Reihenfolge bleibt: Nach oben, Blog, Impressum, Datenschutz bzw.
     Start, Impressum, Datenschutz. */
  .m2footer{padding-top:72px}
  /* Der Textteil hatte zusaetzlich 64 px Innenabstand unten. */
  .body{padding-bottom:24px}
  .m2footer-wrapper{-ms-flex-align:start;align-items:flex-start;gap:22px}
  .m2footer-navbar{-ms-flex-direction:column;flex-direction:column;
    -ms-flex-align:start;align-items:flex-start;gap:22px}
  .m2footer-navbar__link{margin:0}
  .m2footer__top{margin:0}
  /* Beitragsseite: Abstand von der Ueberschrift zu "Thema". */
  body:not(.seite-recht) .hero__title{margin-bottom:32px}
  /* Fehlerseite: Text als geschlossener Block statt ueber die volle Breite. */
  .fehler__inhalt{max-width:88%}
  .fehler__text{text-wrap:balance}
}
@media only screen and (min-width:451px) and (max-width:619px){
  .hero{padding-top:108px}
  /* Beitragsseite: Abstand vom Bild zur Ueberschrift. */
  .hero__img{margin-bottom:40px}
}

/* Zwischen 620 und 992 px steht unter dem letzten Element zu viel Luft -
   35 Prozent weniger: 35 -> 23 px bzw. 50 -> 33 px. Gilt fuer die
   Kontaktseite und die Fusszeile der Unterseiten. */
@media only screen and (min-width:620px) and (max-width:768px){
  .contacts__private{top:calc(100% - 43px);bottom:auto}
  .m2footer{padding-bottom:23px}
}
@media only screen and (min-width:769px) and (max-width:992px){
  .contacts__private{top:auto;bottom:33px}
  .m2footer{padding-bottom:33px}
}

/* Handy quer: Kreis und die Links Impressum/Datenschutz sollen dieselbe
   Unterkante haben. Der Kreis haengt am Innenabstand des Abschnitts (40 px,
   bei sehr flachen Fenstern 24 px), die Links sitzen je nach Breite 50, 35
   oder 20 px ueber der Kante - die Differenz steht hier. */
@media only screen and (min-width:769px) and (max-width:992px) and (max-height:560px) and (orientation:landscape){
  .contacts__button-wrapper{bottom:-7px}
}
@media only screen and (min-width:993px) and (max-width:1200px) and (max-height:560px) and (orientation:landscape){
  .contacts__button-wrapper{bottom:10px}
}
@media only screen and (min-width:601px) and (max-width:768px) and (max-height:560px) and (orientation:landscape){
  .contacts__button-wrapper{bottom:-17px}
}
@media only screen and (max-width:600px) and (max-height:560px) and (orientation:landscape){
  .contacts__button-wrapper{bottom:-20px}
}
@media only screen and (min-width:769px) and (max-width:992px) and (max-height:400px) and (orientation:landscape){
  .contacts__button-wrapper{bottom:9px}
}
@media only screen and (min-width:993px) and (max-width:1200px) and (max-height:400px) and (orientation:landscape){
  .contacts__button-wrapper{bottom:26px}
}
@media only screen and (min-width:601px) and (max-width:768px) and (max-height:400px) and (orientation:landscape){
  .contacts__button-wrapper{bottom:-1px}
}
@media only screen and (max-width:600px) and (max-height:400px) and (orientation:landscape){
  .contacts__button-wrapper{bottom:-4px}
}

/* Blogkarten: die Ueberschrift bleibt hoechstens zweizeilig. Die Breite der
   Karte gibt das Bild vor - die Ueberschrift darf sie nicht ueberragen. */
.blog__card-date,.blog__card-title{max-width:100%}
.blog__card-title{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}

/* Blogkarten zwischen 769 und 1022 px: hier sind ALLE Bilder gleich breit
   (324 px), die grosse Karte hatte aber weiter die groessere Schrift. Bei
   gleicher Bildbreite dieselbe Schriftgroesse wie die kleinen Karten. */
@media only screen and (min-width:769px) and (max-width:1022px){
  .blog__card-title{font-size:24px;line-height:1.25}
}

/* Handy hochkant: der Schreib-mir-Kreis klebte 10 px vor der rechten Kante. */
@media only screen and (max-width:450px){
  /* 15 px tiefer - verschiebt nur die Darstellung, nicht den Textfluss,
     damit der Abschnitt nicht laenger wird. */
  .contacts__button-wrapper{margin-right:22px;transform:translateY(15px)}
}

/* ====================================================================
   Handy hochkant auf dem ECHTEN Geraet
   --------------------------------------------------------------------
   Safari und Chrome auf dem Handy nehmen fuer ihre Leisten rund 180 px vom
   Fenster - ein iPhone 12 Pro hat im Browser also keine 844, sondern etwa
   664 px Hoehe. In der Entwicklerkonsole faellt das nicht auf, auf dem
   Geraet lief dadurch beides ueber: der erste Abschnitt und die
   Kontaktseite. Alles, was fest stand, haengt jetzt an der Fensterhoehe.
   ==================================================================== */
@media only screen and (max-width:450px) and (max-height:820px){
  .home-image{height:calc(30vh - 10px);min-height:150px}
  .home-author{padding-bottom:calc(48px + 6vh)}
  .home-author__name{font-size:44px}
  .home-author__description{max-width:62%}
  .home-author__button{width:100px;height:100px}
}

/* Kontaktseite auf dem Handy: gleiche Abstaende zwischen allen Angaben,
   Ueberschrift mit Luft zum Logo, Impressum und Datenschutz unten. */
@media only screen and (max-width:450px){
  .section-main.contact{
    padding-top:calc(58px + 3.4vh);
    padding-bottom:calc(30px + 3vh);
  }
  .contacts__title{margin-bottom:clamp(18px,2.8vh,32px)}
  .contacts__contact,.contacts__contact:not(:last-child){
    margin-bottom:clamp(18px,2.8vh,32px)}
  .contacts__contact:last-child{margin-bottom:0}
  /* E-Mail -> Folgen */
  .contacts__contacts{margin-bottom:clamp(18px,2.8vh,32px)}
  /* Pinterest -> Satz */
  .contacts__follow{margin-bottom:clamp(18px,2.8vh,32px)}
  .contacts__work-text{margin-bottom:clamp(16px,2.4vh,28px)}
  /* Der freie Platz sammelt sich oben, die Mitte bleibt gleichmaessig. */
  .contacts__row::after{-ms-flex:1 1 0px;flex:1 1 0;min-height:0}
  .contacts__row::before{-ms-flex:3 1 0px;flex:3 1 0}
  .contacts__button-wrapper{transform:none}
}
@media only screen and (max-width:450px) and (max-height:820px){
  .contacts__button{width:100px;height:100px}
  .contacts__button-label{font-size:14px}
  .contacts__contact-item,.contacts__follow-link{font-size:20px}
  .contacts__contact-title{margin-bottom:10px}
}

/* Noch kuerzere Fenster (iPhone mit eingeblendeten Browserleisten, iPhone SE):
   zwei weitere Stufen, damit der Abschnitt ohne Scrollen ins Fenster passt. */
@media only screen and (max-width:450px) and (max-height:700px){
  .contacts__button{width:92px;height:92px}
  .contacts__button-label{font-size:13px}
  .contacts__contact-item,.contacts__follow-link{font-size:19px}
  .contacts__work-text{font-size:13px;margin-bottom:12px}
}
@media only screen and (max-width:450px) and (max-height:620px){
  .section-main.contact{padding-top:calc(52px + 2vh);padding-bottom:calc(24px + 2vh)}
  .contacts__button{width:80px;height:80px}
  .contacts__button-label{font-size:12px}
  .contacts__contact-item,.contacts__follow-link{font-size:17px}
  .contacts__contact,.contacts__contact:not(:last-child),
  .contacts__contacts,.contacts__follow{margin-bottom:13px}
  .contacts__contact-title{margin-bottom:6px;font-size:12px}
  .contacts__title{font-size:20px;margin-bottom:12px}
  .contacts__work-text{font-size:12px;margin-bottom:10px}
}

/* Sehr kleines Handy hochkant (iPhone SE mit Browserleisten, rund 553 px):
   letzte Stufe fuer den ersten Abschnitt. */
@media only screen and (max-width:450px) and (max-height:620px){
  .home-author__name{font-size:36px}
  .home-author__description{font-size:12px}
  .home-author{padding-bottom:calc(36px + 5vh)}
  .home-author__button{width:88px;height:88px}
}

/* Erster Abschnitt, Handy hochkant: unter dem Textblock blieb je nach
   Geraet bis zu 150 px ungenutzt, der Kreis klebte entsprechend weit oben.
   Der Textblock nimmt jetzt den Rest des Abschnitts ein, der Kreis sitzt
   damit auf jedem Handy 40 px ueber der Unterkante. */
@media only screen and (max-width:450px){
  .home-author{-ms-flex:1 1 auto;flex:1 1 auto}
  .home-author__button{bottom:40px}
}

/* Kontaktseite, Handy hochkant: der Kreis sass auf derselben Linie wie
   Impressum und Datenschutz. Auf kurzen Fenstern kommen die Beschriftungen
   eine Spur enger, der gewonnene Platz geht unter den Kreis; auf hohen
   Fenstern (Dev-Konsole) rutscht er 15 px tiefer an den Text heran. */
@media only screen and (max-width:450px) and (max-height:700px){
  .contacts__contact-title{font-size:12px;margin-bottom:6px}
  .section-main.contact{padding-bottom:calc(46px + 2vh)}
}
@media only screen and (max-width:450px) and (min-height:821px){
  .contacts__button-wrapper{transform:translateY(15px)}
}

/* ====================================================================
   Ueberschriften-Ebenen (H2/H3) statt neutraler Textbloecke
   --------------------------------------------------------------------
   Suchmaschinen und Vorleseprogramme brauchen die Gliederung, das Auge
   nicht: die Voreinstellungen des Browsers fuer h2/h3 werden deshalb
   zurueckgenommen, damit sich am Aussehen nichts aendert.
   ==================================================================== */
h2.about__title,h2.contacts__title,h2.blog__title,
h3.blog__card-title,h3.services__card-name{
  margin-top:0;font-weight:inherit;
}
h3.blog__card-title{margin-bottom:0}
/* Nur fuer Vorleseprogramme: aus dem Bild geschoben, aber vorhanden. */
.nur-vorleser{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  border:0;
}

/* Geschlossenes Menue: unsichtbar UND nicht mehr anspringbar. Ohne
   visibility bleiben die fuenf Links im Tabulator-Lauf, obwohl sie
   ausserhalb des Bildes liegen. Die Verzoegerung entspricht der
   Einblendzeit der Vorlage, damit das Zuschieben sichtbar bleibt. */
.header__menu{visibility:hidden;transition:.3s,visibility 0s linear .3s}
.header__menu.active{visibility:visible;transition:.3s,visibility 0s}
/* Der Burger ist jetzt ein Knopf - der Mauszeiger soll das zeigen. */
.header__burger[role="button"]{cursor:pointer}

/* ====================================================================
   Nachtrag 10.09. - drei Layoutpunkte aus der Gesamtdurchsicht
   ==================================================================== */

/* 1) Blogabschnitt auf 13- und 14-Zoll-Laptops: das Kartenbild stand fest
   auf 470 px, dadurch rutschte die Kartenueberschrift bei 800 px und
   768 px Fensterhoehe unter die Kante. Jetzt haengt die Bildhoehe an der
   Fensterhoehe und erreicht die 470 px erst, wenn sie auch hinpassen. */
@media only screen and (min-width:1023px){
  .blog__card-img{height:min(470px,44vh)}
}

/* 2) Fehlerseite quer: Kopfbereich, Textblock und Fusszeile waren fuer
   hohe Fenster gebaut - quer ergab das eine scrollende Seite, obwohl sie
   auf eine Bildschirmhoehe passen soll. */
@media only screen and (max-height:620px){
  .seite-404 .hero{padding-top:96px;padding-bottom:12px}
  .seite-404 .hero__title{font-size:32px;line-height:1.1}
  .seite-404 .fehler{padding-top:8px;padding-bottom:8px}
  .seite-404 .fehler__text{font-size:14px;margin-bottom:20px}
  .seite-404 .fehler__knopf{padding:12px 24px;font-size:14px}
  .seite-404 .m2footer{padding-top:24px;padding-bottom:20px}
}
@media only screen and (max-height:460px){
  .seite-404 .hero{padding-top:84px;padding-bottom:8px}
  .seite-404 .hero__title{font-size:26px}
  .seite-404 .fehler__text{font-size:13px;margin-bottom:14px}
  .seite-404 .m2footer{padding-top:16px;padding-bottom:14px}
}

/* 3) Der Buchstabenring dreht sich - sein unsichtbarer Kasten ist dadurch
   breiter als der Kreis und ragte bei 540 px ueber den rechten Rand.
   Sichtbar war davon nichts, ein Querbalken soll aber gar nicht erst
   entstehen koennen. */
.home-container{overflow-x:clip}

/* Fehlerseite: der Textblock stand mit 420 zu 143 px sehr ungleich im
   Zeilenumbruch - text-wrap:balance verteilt die Woerter gleichmaessig.
   (Bis 619 px galt das schon, jetzt auf allen Groessen.) */
.fehler__text{text-wrap:balance}
/* Unter der Ueberschrift sass ein leerer Rest des Vorlagen-Kopfbereichs
   (68 px). Dadurch war der Abstand nach oben zum Text mehr als dreimal so
   gross wie der vom Knopf zur Fusszeile. Ohne ihn verteilt sich der Platz
   gleichmaessig ueber und unter dem Block. */
.seite-404 .hero-top,
.seite-404 .hero .m2container-body{padding-bottom:0;margin-bottom:0}
/* Die Regel von oben ("Fehlerseite: Ueberschrift ohne Abstand nach unten")
   verlor gegen die spaeteren Regeln der Rechtsseiten - deshalb hier noch
   einmal am Ende. Der Block sitzt damit mittig zwischen Ueberschrift und
   Fusszeile. */
.seite-404 .hero__title{margin-bottom:0}
/* Der Kopfbereich der Fehlerseite braucht keinen eigenen Abstand nach
   unten - der Block darunter steht ohnehin mittig. Ohne ihn sind der
   Abstand ueber dem Text und der unter dem Knopf gleich gross. */
.seite-404 .hero{padding-bottom:0}

/* Blogkarten auf niedrigen Laptop-Fenstern: Platz fuer ZWEI Zeilen.
   Die vorige Regel rechnete nur mit einzeiligen Ueberschriften - ein
   Beitrag mit zweizeiligem Titel lief wieder in die Anzeigelinie unten
   rechts. Statt das Bild noch weiter zu schrumpfen, kommt der obere
   Bereich enger: Innenabstand des Abschnitts und Abstand unter "BLOG".
   Die Bildhoehe rechnet ab hier mit dem festen Rest (Kopf, Titel, Datum,
   zwei Zeilen Ueberschrift, Anzeigelinie) statt mit einem vh-Anteil. */
@media only screen and (min-width:1023px) and (max-height:920px){
  /* 11.09.: 96 px waren zu wenig - die Kopfzeile ist fest und 106 px hoch,
     "BLOG" und die beiden Pfeile lagen dahinter. 128 px lassen 22 px Luft.
     Die 32 px gehen der Bildhoehe ab, damit unten nichts nachrutscht. */
  .section-main.blog{padding-top:128px}
  .blog__title{margin-bottom:32px}
  .blog__card-img{height:min(470px,calc(100vh - 492px));min-height:200px}
}

/* ====================================================================
   Nachtrag 11.09. - Bildseitenverhaeltnisse
   --------------------------------------------------------------------
   Seit die Bilder width/height im HTML tragen (gegen springendes Layout),
   nimmt der Browser diese Werte als Vorgabe, wenn das CSS keine Hoehe
   setzt. Wo die Breite vom Layout begrenzt wird, ergab das eine feste
   Hoehe bei schmalerer Breite - die Bilder wurden gestaucht. height:auto
   stellt das Verhaeltnis wieder her; Bilder mit eigener CSS-Hoehe
   (Klassenregeln) sind davon nicht betroffen.
   ==================================================================== */
img{height:auto}

/* Die Blogkarten haben eine feste Bildhoehe, aber object-fit:fill aus der
   Vorlage - jede Hoehenaenderung hat das Bild gestaucht statt beschnitten.
   cover schneidet stattdessen zu, wie schon unter 1000 px. */
.blog__card-img{object-fit:cover;object-position:center}

/* Blogabschnitt auf Desktop: ab 1560 px Breite wird die Kartenueberschrift
   40 statt 32 px gross (Vorlage). Bei Fensterhoehen zwischen 921 und 1013 px
   reichte der Platz dann nicht mehr fuer zwei Zeilen - die zweite Zeile lief
   in die Anzeigelinie unten rechts. Dieselbe Rechnung wie auf Laptops: die
   Bildhoehe haengt an der Fensterhoehe, der feste Rest (Kopf, Titel, Datum,
   zwei Zeilen Ueberschrift, Anzeigelinie) bleibt frei. Bei 1013 px trifft
   die Rechnung genau auf die 44vh der Zeile darueber - danach passt es
   ohnehin, darunter greift der Laptop-Block. */
@media only screen and (min-width:1560px) and (min-height:921px) and (max-height:1013px){
  .blog__card-img{height:min(470px,calc(84vh - 407px));min-height:200px}
}

/* ====================================================================
   Sicherheitsabstand zur Kopfzeile
   --------------------------------------------------------------------
   Die Kopfzeile liegt fest ueber der Seite und hat einen DECKENDEN
   Hintergrund (--near-black), ist also kein Fenster: was darunter
   geraet, ist weg. Hoehe gemessen: 106 px ab 1201 px Breite, 76 px
   zwischen 431 und 1200, 58 px darunter.

   Der Innenabstand der Abschnitte haengt ab 1201 px an der Fenster-
   hoehe (15.83vh). Unter rund 809 px Fensterhoehe faellt er unter die
   106 px - "Worum es hier geht", "Themen", "Wohnung einrichten" und
   "So erreichst du mich" lagen dann hinter der Kopfzeile. Feste 128 px
   lassen 22 px Luft. Schmalere Fenster sind nachgemessen in Ordnung.
   ==================================================================== */
@media only screen and (min-width:1201px) and (max-height:808px){
  .section-main{padding-top:128px}
}

/* Fehlerseite in flachen Fenstern: derselbe Fall. Die 96 px stammen aus
   dem Block fuer max-height:620px. Der Textblock in der Mitte gibt den
   Platz her, die Seite bleibt ohne Scrollbalken. */
@media only screen and (min-width:1201px) and (max-height:620px){
  .seite-404 .hero{padding-top:128px}
}

/* Blogabschnitt: ab 1560 px Breite sind "BLOG" und die Kartenueberschrift
   je 8 px groesser (Vorlage) - zusammen rund 40 px mehr Hoehe. Die Rechnung
   fuer flache Fenster braucht diesen Zuschlag, sonst beruehrt die zweite
   Zeile die Anzeigelinie unten rechts. */
@media only screen and (min-width:1560px) and (max-height:920px){
  .blog__card-img{height:min(470px,calc(100vh - 532px));min-height:200px}
}

/* Die Anzeigelinie unten rechts liegt als Auflage ueber dem Abschnitt und
   erzeugt selbst keinen Ueberlauf. Damit in sehr flachen Fenstern nicht
   die Kartenueberschrift darunter verschwindet, haelt der Abschnitt ihren
   Streifen frei: passt es nicht mehr, laeuft der Abschnitt ueber und
   scrollt intern - das ist hier ausdruecklich erlaubt. */
@media only screen and (min-width:1201px){
  .section-main.blog{padding-bottom:76px}
}

/* Grosse Blogkachel in flachen Fenstern: die Breite folgt der Hoehe ------
   Die Kachel ist 688 px breit, die Bildhoehe haengt aber an der Fenster-
   hoehe. Bei 1280 x 800 ergab das 688 x 308 - ein sehr breiter Streifen
   neben nahezu quadratischen kleinen Kacheln. Das Seitenverhaeltnis bei
   1600 x 900 (688 / 368 = 1.87) gilt jetzt als Vorgabe: die Kachel wird
   nur so breit, wie ihre Bildhoehe es traegt, hoechstens 688 px. Ab
   1600 x 900 aufwaerts aendert sich dadurch nichts.
   Die Hoehe selbst bleibt, wie sie ist - nur ueber eine Variable, damit
   Breite und Hoehe nicht auseinanderlaufen koennen. */
@media only screen and (min-width:1023px) and (max-height:920px){
  :root{--kachelhoehe:max(200px,min(470px,calc(100vh - 492px)))}
}
@media only screen and (min-width:1560px) and (max-height:920px){
  :root{--kachelhoehe:max(200px,min(470px,calc(100vh - 532px)))}
}
@media only screen and (min-width:1023px) and (max-height:920px){
  .blog__card-img{height:var(--kachelhoehe)}
  .blog__card-md{max-width:min(688px,calc(var(--kachelhoehe) * 1.87))}
}

/* ------------------------------------------------------------ Blog-Übersicht
   /blog/: alle Beiträge als Raster. Schrift und Farben wie die Blogkarten
   der Startseite; Sortieren und Thema-Filter über zwei Auswahlfelder
   (theme/js/blog.js). */
.seite-blog .hero{padding-bottom:0}
.seite-blog .hero__title{margin-bottom:0}
.bloguebersicht{padding-top:56px;padding-bottom:120px}
.bloguebersicht__rahmen{flex:1 1 100%;width:100%;min-width:0}
.bloguebersicht__steuerung{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:24px 40px;padding-bottom:28px;margin-bottom:48px;border-bottom:1px solid rgba(255,242,226,.18)}
.bloguebersicht__steuerung[hidden]{display:none}
.bloguebersicht__anzahl{margin:0;color:var(--cream);font-size:18px;line-height:1.3}
.bloguebersicht__felder{display:flex;flex-wrap:wrap;gap:16px 24px}
.bloguebersicht__feld{display:flex;flex-direction:column;gap:8px;min-width:240px}
.bloguebersicht__label{font-size:14px;line-height:1.2;color:rgba(255,242,226,.62)}
.bloguebersicht__auswahl{-webkit-appearance:none;appearance:none;width:100%;
  font-family:Archivo,system-ui,sans-serif;font-size:17px;line-height:1.3;color:var(--cream);
  background-color:transparent;border:1px solid rgba(255,242,226,.32);border-radius:999px;
  padding:12px 48px 12px 20px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23FFF2E2' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 20px center;
  transition:border-color .16s ease}
.bloguebersicht__auswahl:hover{border-color:var(--amber)}
.bloguebersicht__auswahl:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.bloguebersicht__auswahl option{background:var(--near-black);color:var(--cream)}

.bloguebersicht .bloguebersicht__liste{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 32px}
.bloguebersicht .bloguebersicht__eintrag{margin:0;font-size:inherit;line-height:inherit}
.bloguebersicht__eintrag[hidden]{display:none}
/* Ohne Unterstrich (Lucas Wunsch): „.body a" setzt für Textlinks eine
   Unterstreichung, die beim Überfahren sichtbar wird. Hier reicht das
   Aufziehen des Bildes und der amberfarbene Titel. */
.bloguebersicht a.bloguebersicht__karte{display:block;color:inherit;text-decoration:none}
.bloguebersicht__bild{display:block;overflow:hidden;aspect-ratio:4/3;background:rgba(255,242,226,.06)}
.bloguebersicht__bild img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .25s var(--ease-out)}
/* Thema und Datum immer untereinander, auf allen Bildschirmgrößen (Lucas
   Wunsch, 25.09.2026) — vorher nebeneinander, bei langen Themen umgebrochen. */
.bloguebersicht__zeile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  margin-top:20px;font-size:16px;line-height:1.35;color:rgba(255,242,226,.62)}
.bloguebersicht__thema{color:var(--amber)}
.bloguebersicht .bloguebersicht__titel{margin:12px 0 0;font-size:32px;line-height:1.25;text-transform:uppercase;
  color:var(--cream);transition:color .16s ease}
@media (hover:hover) and (pointer:fine){
  .bloguebersicht__karte:hover .bloguebersicht__bild img{transform:scale(1.05)}
  .bloguebersicht__karte:hover .bloguebersicht__titel{color:var(--amber)}
}
.bloguebersicht__karte:focus-visible{outline:2px solid var(--amber);outline-offset:6px}
@media (prefers-reduced-motion:reduce){
  .bloguebersicht__bild img,.bloguebersicht__titel,.bloguebersicht__auswahl{transition:none}
  .bloguebersicht__karte:hover .bloguebersicht__bild img{transform:none}
}
@media only screen and (max-width:1200px){
  .bloguebersicht .bloguebersicht__liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 24px}
  .bloguebersicht .bloguebersicht__titel{font-size:28px}
}
@media only screen and (max-width:900px){
  .bloguebersicht{padding-top:40px;padding-bottom:80px}
}
@media only screen and (max-width:640px){
  .bloguebersicht .bloguebersicht__liste{grid-template-columns:1fr;gap:48px}
  .bloguebersicht__felder,.bloguebersicht__feld{width:100%;min-width:0}
  .bloguebersicht__steuerung{margin-bottom:32px}
  /* Handy (Lucas Wunsch): Überschrift → Steuerleiste 32 px und letzter
     Beitrag → Fußzeile wie auf der Beitragsseite (24 + 72 px). Vorher
     72 px oben und 152 px unten. */
  .bloguebersicht{padding-top:0;padding-bottom:24px}
  body.seite-blog .hero__title{margin-bottom:32px}
  .bloguebersicht .bloguebersicht__titel{font-size:26px}
}

/* Blog: Knopf „Alle Beiträge" neben den Pfeilen (Lucas Wunsch, 22.09.2026).
   Gleiche Höhe, Linienfarbe und Hover wie die beiden Pfeilkreise; er liegt
   im selben Behälter, dadurch ändert sich keine Abschnittshöhe. Desktop:
   links vor den Pfeilen. Unter 1000 px stehen die Pfeile links unter dem
   Karussell, der Knopf rückt ans rechte Ende derselben Zeile. Oben
   bündig statt mittig: die Pfeil-Kästen sind durch die Grundlinie des SVG
   3 px höher als ihr Kreis. */
.blog__alle{display:inline-flex;align-self:flex-start;align-items:center;box-sizing:border-box;height:50px;
  padding:0 24px;margin-right:20px;border:1px solid #B09A88;border-radius:999px;
  font-family:Archivo,system-ui,sans-serif;font-size:16px;line-height:1;white-space:nowrap;
  color:#B09A88;text-decoration:none;transition:color .2s ease,border-color .2s ease}
.blog__alle:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .blog__alle:hover{color:#F7EEE2;border-color:#F7EEE2}
}
@media (prefers-reduced-motion:reduce){.blog__alle{transition:none}}
@media only screen and (max-width:1000px){
  .blog__alle{order:3;margin:0 0 0 auto;height:46px;padding:0 20px}
}
@media only screen and (max-width:600px){
  .blog__alle{height:40px;padding:0 18px;font-size:15px}
}

/* Nie spiegeln (Lucas Vorgabe, 24.09.2026). Die Vorlage dreht das grosse
   Beitragsbild unter 992 px (main2.css) und das Handy-Bild der Startseite
   (main.css) per scaleX(-1) um - Schrift, Uhren und Tuergriffe standen
   dann seitenverkehrt. */
.hero-img__item,.hero-img__item--case,.home-image--mobile{
  -webkit-transform:none!important;transform:none!important}