/* =============================================================================
   GESTALTUNG — die Belegseite fuer alles, was neben der Website entsteht.

   WARUM DIESE SEITE EXISTIERT: Fabian Kaus Zitat auf /websites.html sagt
   „Neben der Website wurden auch mein Logo, die Visitenkarten und das
   Briefpapier gestaltet, sodass ich alles aus einer Hand bekommen habe."
   Der Satz stand da und niemand konnte ihn pruefen. Hier ist der Beleg.

   BEWUSST KEINE LEISTUNGSSEITE. Sie steht nur im Fuss, nicht in der
   Kopfleiste: dort stehen die Leistungslinien (Websites, Shops, Software) mit
   Preis und Ablauf. Print danebenzustellen waere ein Versprechen, das wir mit
   einem einzigen Kunden nicht halten koennen. Sobald es drei sind, kann daraus
   eine echte Linie werden.

   Sie laedt websites.css mit — daher kommen Farben, Schrift, Leiste und Fuss.
   Hier steht nur, was diese Seite zusaetzlich braucht.
   ============================================================================= */

/* Die Kopfleiste ist fixiert und belegt keinen Platz im Fluss. */
.gs-kopf{
  max-width:940px;margin:0 auto;
  padding:calc(var(--nav-hoehe,80px) + clamp(28px,4vw,48px)) clamp(22px,4vw,56px) clamp(28px,3vw,40px);
  text-align:center}
.gs-kopf h1{margin:0 0 16px;font-size:clamp(1.9rem,3.6vw,2.85rem);line-height:1.1;letter-spacing:-.035em}
.gs-kopf h1 br{display:none}
.gs-kopf .lead{max-width:66ch;margin:0 auto;color:var(--ink-soft);font-size:clamp(1rem,1.25vw,1.08rem);line-height:1.6}

/* --- Ein Stueck: Bild und Begruendung nebeneinander -------------------------
   Die Seite hat nur drei Stuecke. Bei so wenigen traegt der Wechsel: Bild
   links, Bild rechts, Bild links. Ein starres Raster haette bei drei Zeilen
   wie eine Liste ausgesehen, und eine Liste ist genau das, was eine
   Belegseite nicht sein soll. */
.gs-stueck{
  max-width:1360px;margin:0 auto;
  padding:clamp(30px,3.6vw,48px) clamp(22px,4vw,56px);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:center;
  scroll-margin-top:var(--nav-hoehe,80px);
  border-top:1px solid var(--line)}
.gs-stueck:nth-child(even){grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr)}
.gs-stueck:nth-child(even) .gs-bild{order:2}
.gs-stueck__text h2{margin:0 0 12px;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.1;letter-spacing:-.02em}
.gs-stueck__text p{margin:0 0 14px;color:var(--ink-soft);line-height:1.6}
.gs-stueck__text p:last-child{margin-bottom:0}
/* Die Merkmale: kurze Fakten statt Fliesstext, wo es Fakten sind. */
.gs-fakten{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.gs-fakten li{position:relative;padding-left:22px;font-size:.96rem;line-height:1.3;color:var(--ink)}
.gs-fakten li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:2px;background:var(--cyan)}

/* --- Die Abbildungen -------------------------------------------------------
   Gedrucktes braucht eine Kante, sonst schwimmt es auf der Seite. Ein feiner
   Rahmen plus ein flacher Schatten liest sich als Blatt, ohne dass daraus eine
   Attrappe mit Eselsohr wird. */
.gs-bild{margin:0;min-width:0}
.gs-bild img{display:block;width:100%;height:auto;border-radius:2px}
.gs-blatt img{border:1px solid var(--line);box-shadow:0 18px 40px -26px rgba(13,24,38,.5)}
.gs-paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,20px)}
.gs-bild figcaption{margin-top:12px;font-size:.8rem;color:var(--muted);text-align:center}

/* Das Logo braucht beide Grundtoene, sonst ist die halbe Arbeit unsichtbar:
   der Satz enthaelt eine helle Fassung, und die zeigt sich nur auf dunkel. */
.gs-logo{display:grid;gap:14px}
.gs-logo__feld{display:grid;place-items:center;padding:clamp(20px,2.4vw,32px);border-radius:3px;min-width:0}
.gs-logo__feld--hell{background:var(--paper);border:1px solid var(--line)}
.gs-logo__feld--dunkel{background:var(--navy)}
.gs-logo__feld img{width:min(420px,88%);height:auto}
.gs-logo__zwei{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gs-logo__zwei .gs-logo__feld img{width:min(220px,90%)}
.gs-vergleich{grid-template-columns:repeat(2,minmax(0,1fr))}
.gs-vergleich .gs-logo__feld{align-content:center;gap:20px;padding:clamp(16px,2vw,26px)}
.gs-vergleich .gs-logo__feld img{width:min(270px,100%)}
.gs-vergleich__label{color:var(--ink-soft);font-size:.75rem;line-height:1.4;text-align:center}
.gs-vergleich figcaption{grid-column:1/-1}

/* --- Abschluss: zurueck zum Fall ------------------------------------------ */
.gs-ende{
  max-width:1360px;margin:0 auto;
  padding:clamp(32px,4vw,48px) clamp(22px,4vw,56px) clamp(40px,5vw,64px);
  border-top:1px solid var(--line);text-align:center}
.gs-ende blockquote{margin:0 auto clamp(20px,3vw,28px);max-width:660px;
  font-size:clamp(1.1rem,1.9vw,1.4rem);line-height:1.45;color:var(--ink);letter-spacing:-.012em}
.gs-ende figcaption{color:var(--muted);font-size:.92rem}
.gs-ende figcaption b{color:var(--ink);font-weight:660}
.gs-ende__wege{margin:clamp(24px,3.4vw,36px) 0 0;display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center}

@media(max-width:860px){
  .gs-stueck,.gs-stueck:nth-child(even){grid-template-columns:1fr;gap:24px}
  /* Auf einer Spalte steht das Bild immer oben — der Wechsel aus der breiten
     Fassung wuerde hier nur die Reihenfolge von Bild und Text vertauschen und
     laese sich als Fehler lesen. */
  .gs-stueck:nth-child(even) .gs-bild{order:0}
}
@media(max-width:640px){
  .gs-kopf h1 br{display:initial}
  .gs-vergleich{grid-template-columns:1fr}
}
@media(max-width:560px){
  .gs-logo__zwei{grid-template-columns:1fr}
  .gs-paar{grid-template-columns:1fr}
}

/* --- Die E-Mail-Signatur steht als echtes HTML in der Seite -----------------
   Jedes andere Stueck auf dieser Seite ist gedruckt und muss deshalb ein Bild
   sein. Die Signatur nicht: sie ist von Haus aus HTML. Als Screenshot waere
   sie auf hochaufloesenden Schirmen unscharf und rund 40 KB schwer, im
   Original wiegt sie knapp 4 KB und bleibt bei jeder Zoomstufe scharf.

   Weisser Grund, nicht --paper: so steht sie auch im Postfach. Kein Radius,
   Hausregel — aber Rahmen und Schatten wie bei den Blaettern, sonst schwimmt
   sie auf der Seite.

   Die Verweise sind beim Einbauen entfernt worden. Die Stile der Signatur
   haengen alle inline am Element, deshalb sieht sie trotzdem aus wie in der
   Mail — sie fuehrt nur nirgendwo hin. */
.gs-signatur{
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 18px 40px -26px rgba(13,24,38,.5);
  padding:clamp(24px,2.8vw,38px);
  /* Die Signatur ist auf 480px Mailbreite gebaut. Auf schmalen Handys darf sie
     in ihrem eigenen Kasten wandern, statt die ganze Seite breitzuziehen. */
  overflow-x:auto}
/* img{max-width:100%} aus websites.css greift auf schmalen Schirmen und wuerde
   die Wortmarke gegen ihre feste Hoehe von 40px stauchen. */
.gs-signatur img{height:auto}
/* Ohne href ist das <a> kein Verweis mehr; der Mauszeiger soll das auch
   zeigen und nicht zum Klicken einladen. */
.gs-signatur a{cursor:default}