/* ==========================================================================
   Nahweb-Rahmen für die Beispiel-Websites (Stil 1 «Warm und gefasst»)

   Zwei Teile, auf jeder Seite aller Beispiele gleich:
   · .nw-oben       Streifen ganz oben, im Fluss (klebt nicht, frisst am Handy nichts)
   · .nw-abschluss  Abschluss ganz unten: Hinweis, Bildquellen, Schriften, Paket, Knopf,
                    danach der Kasten «Warum so?» mit dem eigenen Text der Beispiel-Website

   Einbinden NACH dem CSS der Beispiel-Website:
     <link rel="stylesheet" href="../_rahmen/rahmen.css">
   Alle Klassen beginnen mit nw-oben, nw-abschluss oder nw-zeichen; alle Variablen mit --nwr-.
   Die Beispiele haben eigene --nw-…-Variablen und Klassen (nw-knopf, nw-kasten …), darum
   andere Namen hier. Schriften lokal aus /assets/fonts/ der Hauptseite (dieselben Dateien, darum aus dem
   Zwischenspeicher, wer von der Startseite kommt; Open Font License), keine fremden Server.

   Haken für das Beispiel: Hat es am Handy eine feste Leiste unten, setzt es
   --nw-platz-unten (z. B. 72px); der Abschluss wird dann um so viel höher, damit die
   Leiste nichts verdeckt.

   Baustein oben (direkt nach dem Sprunglink, vor dem Kopf des Beispiels):
   <div class="nw-oben" role="note" aria-label="Hinweis von Nahweb">
     <div class="nw-oben__innen">
       <p class="nw-oben__text"><span class="nw-zeichen" aria-hidden="true">N</span><span><strong>Beispiel-Website von Nahweb</strong> für einen erfundenen Betrieb. Formulare senden nichts.</span></p>
       <p class="nw-oben__links"><a class="nw-oben__link" href="/">Zurück zu Nahweb</a><a class="nw-oben__link nw-oben__link--aktion" href="/#kontakt">So eine für meinen Betrieb</a></p>
     </div>
   </div>

   Baustein unten (nach dem Fuss des Beispiels, vor Leiste und Fenstern):
   <aside class="nw-abschluss" aria-label="Über diese Beispiel-Website">
     <div class="nw-abschluss__innen">
       <p class="nw-abschluss__marke"><span class="nw-zeichen" aria-hidden="true">N</span>Nahweb</p>
       <div class="nw-abschluss__karte">
         <h2 class="nw-abschluss__titel">Diese Website ist ein Beispiel von Nahweb.</h2>
         <p class="nw-abschluss__text">Betrieb, Angebote, Preise, Personen und Kontaktdaten sind erfunden. Formulare senden nichts, und nichts wird gespeichert.</p>
         <p class="nw-abschluss__quellen">Bilder: … <a href="…">Bildquellen …</a>. Schriften: …</p>
         <div class="nw-abschluss__paket">
           <p class="nw-abschluss__paketzeile">Diese Beispiel-Website entspricht dem Paket Premium, CHF&nbsp;2'490.</p>
           <p class="nw-abschluss__fakten">Der Preis ist einmalig, und es gibt keine Laufzeit. Das Hosting ist inbegriffen. Die Domain kostet rund CHF&nbsp;15–20 im&nbsp;Jahr.</p>
         </div>
         <p class="nw-abschluss__aktion"><a class="nw-abschluss__knopf" href="/#kontakt">So eine für meinen Betrieb</a><a class="nw-abschluss__zurueck" href="/">Zurück zu Nahweb</a></p>
       </div>
       <section class="nw-abschluss__karte nw-abschluss__warum" aria-labelledby="nw-warum-titel">
         <h2 class="nw-abschluss__titel" id="nw-warum-titel">Warum so?</h2>
         <p>… eigener Text der Beispiel-Website …</p>
       </section>
     </div>
   </aside>
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../../assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../../assets/fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Gemeinsam: Farben und Schriften von Nahweb, gegen das Beispiel abgeschirmt
   -------------------------------------------------------------------------- */
.nw-oben,
.nw-abschluss {
  --nwr-papier: #F6F2EA;        /* warmes Papier */
  --nwr-papier-tief: #EDE6D8;   /* eingelassene Fläche */
  --nwr-karte: #FFFFFF;
  --nwr-linie: #E2D9C8;
  --nwr-linie-tief: #D6CCB8;
  --nwr-tinte: #17181B;         /* 15.9:1 auf Papier */
  --nwr-tinte-weich: #56524B;   /* 6.9:1 auf Papier, 6.3:1 auf Papier tief */
  --nwr-orange: #EC5A3A;        /* nur als Fläche, darauf Tinte (5.2:1) */
  --nwr-knopf: #CB4221;         /* nur Knöpfe, darauf Weiss (4.8:1) */
  --nwr-knopf-hover: #B73A1C;
  --nwr-orange-schrift: #9A2F14; /* Linkfarbe, 8.4:1 auf Papier tief */
  --nwr-titel: "Bricolage Grotesque", "Helvetica Neue", Arial, system-ui, sans-serif;
  --nwr-text: "Instrument Sans", "Helvetica Neue", Arial, Roboto, system-ui, sans-serif; /* Ersatz ähnlich breit: Streifen springt nicht */
  --nwr-rand: 16px;

  box-sizing: border-box;
  margin: 0;
  color: var(--nwr-tinte);
  font-family: var(--nwr-text);
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}
.nw-oben *,
.nw-abschluss * { box-sizing: border-box; }

.nw-oben a:focus-visible,
.nw-abschluss a:focus-visible {
  outline: 3px solid var(--nwr-tinte);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Das Zeichen: N auf oranger Fläche */
.nw-zeichen {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--nwr-orange);
  color: var(--nwr-tinte);
  font: 800 13px/1 var(--nwr-titel);
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Streifen oben
   Handy: Zeichen und Text fliessen zusammen (zwei Zeilen), darunter die zwei Links.
   Ab 900 px: alles in einer Zeile, Links rechts.
   -------------------------------------------------------------------------- */
.nw-oben {
  position: relative;
  background: var(--nwr-papier-tief);
  border-bottom: 1px solid var(--nwr-linie-tief);
  font-size: 14px;
  line-height: 20px;
}
.nw-oben__innen {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px var(--nwr-rand) 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 28px;
  row-gap: 1px;
}
.nw-oben__text {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
  color: var(--nwr-tinte);
  font-size: 14px;
  line-height: 20px;
}
.nw-oben__text .nw-zeichen { margin-right: 8px; vertical-align: top; }
.nw-oben__text strong { font-weight: 650; }
.nw-punkt { margin: 0 1px 0 2px; }
.nw-oben__links {
  flex: 0 1 auto;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
  row-gap: 0;
  font-size: 14px;
  line-height: 20px;
}
.nw-oben__link {
  position: relative;
  display: inline-block;
  padding: 3px 0;
  color: var(--nwr-tinte);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}
/* Trefferfläche 44 px hoch, ohne den Streifen höher zu machen */
.nw-oben__link::after {
  content: "";
  position: absolute;
  left: -6px; right: -6px;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.nw-oben__link--aktion { color: var(--nwr-orange-schrift); font-weight: 700; }
.nw-oben__link:hover { color: var(--nwr-tinte); text-decoration-thickness: 2px; }
.nw-oben__link--aktion:hover { color: var(--nwr-knopf-hover); }

@media (max-width: 374px) {
  .nw-oben__text, .nw-oben__links { font-size: 13.5px; }
  .nw-oben__links { column-gap: 16px; }
}
@media (max-width: 359px) {
  .nw-oben,
  .nw-abschluss { --nwr-rand: 14px; }
}

@media (min-width: 700px) {
  .nw-oben,
  .nw-abschluss { --nwr-rand: 24px; }
}

/* Ab 900 px: Text links, Links rechts in einer Zeile */
@media (min-width: 900px) {
  .nw-oben__innen { flex-wrap: nowrap; justify-content: space-between; padding-top: 8px; padding-bottom: 8px; }
  .nw-oben__text { flex: 1 1 auto; }
  .nw-oben__links { flex-wrap: nowrap; }
}

/* --------------------------------------------------------------------------
   Abschluss unten
   -------------------------------------------------------------------------- */
.nw-abschluss {
  background: var(--nwr-papier);
  border-top: 1px solid var(--nwr-linie);
  padding: 28px 0 calc(32px + var(--nw-platz-unten, 0px));
  font-size: 16px;
  line-height: 1.55;
}
.nw-abschluss__innen {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--nwr-rand);
  display: grid;
  gap: 14px;
}
.nw-abschluss p { margin: 0; }

.nw-abschluss__marke {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  color: var(--nwr-tinte);
  font: 800 22px/1 var(--nwr-titel);
  letter-spacing: -0.01em;
}
.nw-abschluss__marke .nw-zeichen {
  width: 32px; height: 32px;
  border-radius: 10px;
  font-size: 19px;
}

.nw-abschluss__karte {
  background: var(--nwr-karte);
  border: 1px solid var(--nwr-linie);
  border-radius: 10px; /* Feinschliff 5.10.2026: 18 → 10 px, ohne Schatten, wie die Karten der Startseite */
  padding: 20px 18px 22px;
  min-width: 0;
}

.nw-abschluss__titel {
  margin: 0 0 10px;
  padding: 0;
  color: var(--nwr-tinte);
  font: 800 22px/1.15 var(--nwr-titel);
  letter-spacing: -0.01em;
  text-transform: none;
  border: 0;
}
.nw-abschluss__text { font-size: 16px; line-height: 1.55; }
.nw-abschluss .nw-abschluss__text + .nw-abschluss__text { margin-top: 10px; }
.nw-abschluss .nw-abschluss__quellen {
  margin-top: 12px;
  color: var(--nwr-tinte-weich);
  font-size: 14.5px;
  line-height: 1.5;
}
.nw-abschluss a {
  color: var(--nwr-tinte);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.nw-abschluss a:hover { text-decoration-thickness: 2px; color: var(--nwr-tinte); }

/* Paket: die orange Fläche */
.nw-abschluss__paket {
  margin-top: 16px;
  padding: 14px 16px 15px;
  border-radius: 8px;
  background: var(--nwr-orange);
  color: var(--nwr-tinte);
}
.nw-abschluss__paketzeile {
  font: 700 17px/1.3 var(--nwr-titel);
  letter-spacing: -0.005em;
}
.nw-abschluss .nw-abschluss__fakten {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.45;
}

.nw-abschluss .nw-abschluss__aktion {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}
.nw-abschluss a.nw-abschluss__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 22px;
  border: 0;
  border-radius: 8px;
  background: var(--nwr-knopf);
  color: #FFFFFF;
  font: 600 17px/1.2 var(--nwr-text);
  text-decoration: none;
}
.nw-abschluss a.nw-abschluss__knopf:hover { background: var(--nwr-knopf-hover); color: #FFFFFF; }
.nw-abschluss a.nw-abschluss__zurueck {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: 16px;
}

/* «Warum so?» */
.nw-abschluss__warum p { font-size: 16px; line-height: 1.55; }
.nw-abschluss .nw-abschluss__warum p + p { margin-top: 10px; }

@media (min-width: 700px) {
  .nw-abschluss { padding-top: 36px; padding-bottom: calc(40px + var(--nw-platz-unten, 0px)); }
  .nw-abschluss__karte { padding: 24px 26px 26px; }
}

@media (min-width: 900px) {
  .nw-abschluss__innen {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 16px 20px;
    align-items: start;
  }
  .nw-abschluss__marke { grid-column: 1 / -1; }
  .nw-abschluss__titel { font-size: 24px; }
}

@media print {
  .nw-oben__links,
  .nw-abschluss__aktion { display: none !important; }
  .nw-abschluss__karte { box-shadow: none; }
}