/* Detailseiten-Template v2 der Wichtelwerkstatt (Vorschau) */
* { box-sizing: border-box; margin: 0; }
body { background: #100709; color: #F7F1E8; font: 17px/1.75 Georgia, 'Times New Roman', serif; }
.hinweis { background: #241618; color: #B9A88F; font: 13px/1.5 'Inter', sans-serif;
           padding: 10px 20px; text-align: center; border-bottom: 1px solid #3A2418; }
a { color: inherit; text-decoration: none; }

.held { position: relative; min-height: 46vh; display: flex; align-items: flex-end; overflow: hidden; }
.held img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
               filter: brightness(.6) saturate(1.05); }
.held .nacht { position: absolute; inset: 0;
  background: linear-gradient(10deg, #100709 8%, rgba(16,7,9,.25) 55%, rgba(16,7,9,.55) 100%); }
.held .staub i { position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #FFD989, rgba(255,180,80,0));
  animation: schweben 9s linear infinite; opacity: 0; }
@keyframes schweben {
  0% { transform: translateY(20px) scale(.6); opacity: 0; }
  20% { opacity: .8; } 80% { opacity: .4; }
  100% { transform: translateY(-30vh) translateX(20px) scale(1.1); opacity: 0; }
}
.held .kopf { position: relative; z-index: 3; max-width: 760px; margin: 0 auto;
              width: 100%; padding: 80px 24px 34px; }
.stempel { display: inline-block; font: 12px/1 'JetBrains Mono', monospace; letter-spacing: 2px;
           color: #CBA75D; border: 2px solid #6E5030; padding: 8px 14px; border-radius: 6px;
           transform: rotate(-1.5deg); background: rgba(16,7,9,.55); }
.geprueft { display: inline-block; margin-left: 10px; font: 12px/1 'JetBrains Mono', monospace;
            letter-spacing: 2px; color: #7FC98A; border: 2px solid #2E5030; padding: 8px 14px;
            border-radius: 6px; transform: rotate(1.2deg); background: rgba(16,7,9,.55); }
h1 { font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(30px, 4.8vw, 46px);
     line-height: 1.1; margin-top: 16px; text-shadow: 0 2px 26px #000; }
.seo { font: 14.5px/1.5 'Inter', sans-serif; color: #CBBBA4; margin-top: 10px;
       text-shadow: 0 1px 8px #000; max-width: 60ch; }

.leiste { max-width: 760px; margin: 0 auto; padding: 16px 24px; display: flex;
          justify-content: space-between; align-items: center; gap: 14px;
          border-bottom: 1px solid #2A1B14; font-family: 'Inter', sans-serif; }
.leiste .meta { color: #8F7F6C; font-size: 13px; }
.teilen { display: flex; gap: 8px; }
.teilen a, .teilen button { display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid #3A2418; background: #1E1114; color: #CBBBA4; border-radius: 999px;
  padding: 7px 14px; font: 600 12.5px/1 'Inter', sans-serif; cursor: pointer; }
.teilen a:hover, .teilen button:hover { border-color: #EFB54B; color: #EFB54B; }

main { max-width: 760px; margin: 0 auto; padding: 34px 24px 90px; }
p { margin-top: 20px; color: #E4D8C8; }
.vorspann { font-size: 19px; color: #CBBBA4; margin-top: 6px; font-style: italic; }
h2 { font-family: 'Inter', sans-serif; font-size: 19px; margin-top: 38px; color: #EFB54B; }
ul, ol { margin: 14px 0 0 22px; color: #E4D8C8; }
li { margin-top: 10px; }
li b { color: #F7F1E8; }
.hand { font-family: 'Caveat', cursive; font-size: 21px; color: #EFB54B; }

.register { margin-top: 30px; display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px;
            font-family: 'Inter', sans-serif; }
.register div { position: relative; background: linear-gradient(170deg, #241618, #1A0D0F);
                border: 1px solid #4A2F1B; border-radius: 12px; padding: 16px 16px 14px;
                text-align: center; }
.register div::after { content: ""; position: absolute; inset: 0; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(239,181,75,.14); pointer-events: none; }
.register .k { font: 700 10px/1.3 'JetBrains Mono', monospace; letter-spacing: 2px; color: #8F7F6C; }
.register .w { margin-top: 8px; font-weight: 800; font-size: 21px; color: #EFB54B; }
.register .z { margin-top: 2px; font-size: 11.5px; color: #8F7F6C; }

.kasten { margin-top: 34px; background: #1E1114; border: 1px solid #3A2418; border-radius: 14px;
          padding: 22px 26px; font-family: 'Inter', sans-serif; font-size: 15px; }
.kasten .k { font: 700 12px/1 'JetBrains Mono', monospace; letter-spacing: 2px; color: #EFB54B; }
.kasten p { color: #B9A88F; font-size: 15px; margin-top: 10px; }

.mehr { border-top: 1px solid #2A1B14; margin-top: 54px; padding-top: 26px; }
.mehr .mk { font: 700 12px/1 'JetBrains Mono', monospace; letter-spacing: 2px; color: #EFB54B; }
.mehrgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.mehrgrid a { display: block; background: #1E1114; border: 1px solid #3A2418; border-radius: 12px;
              overflow: hidden; font-family: 'Inter', sans-serif; transition: transform .15s; }
.mehrgrid a:hover { transform: translateY(-3px); }
.mehrgrid img { width: 100%; aspect-ratio: 16/7; object-fit: cover; }
.mehrgrid .t { padding: 12px 15px 15px; }
.mehrgrid .r { font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing: 2px; color: #CBA75D; }
.mehrgrid h3 { font-size: 15px; margin-top: 6px; line-height: 1.3; }
.zurueck { display: inline-block; margin-top: 34px; font-family: 'Inter', sans-serif;
           font-size: 14px; color: #EFB54B; font-weight: 700; }
@media (max-width: 640px) {
  .mehrgrid { grid-template-columns: 1fr; }
  .leiste { flex-direction: column; align-items: flex-start; }
}

/* v8: Nav, dezente Einordnung, Standard-Share, App-Block, Footer */

.register { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px;
            font-family: 'Inter', sans-serif; }
.register div { background: #1A0D0F; border: 1px solid #3A2418; border-radius: 999px;
                padding: 7px 14px; display: flex; gap: 8px; align-items: baseline;
                text-align: left; }
.register div::after { display: none; }
.register .k { font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing: 1.5px; color: #8F7F6C; }
.register .w { margin: 0; font-weight: 700; font-size: 13.5px; color: #EFB54B; }
.register .z { display: none; }

.teilen { display: flex; gap: 8px; flex-wrap: wrap; }
.tb { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px;
      padding: 8px 15px; font: 700 12.5px/1 'Inter', sans-serif; color: #fff; cursor: pointer; }
.tb.wa { background: #25D366; color: #073b17; }
.tb.pin { background: #E60023; }
.tb.fb { background: #1877F2; }
.tb.ko { background: #241618; color: #CBBBA4; border: 1px solid #3A2418; }

.appblock { margin-top: 54px; border: 1px solid #4A2F1B; border-radius: 22px;
            background: linear-gradient(160deg, #241214, #1A0D0F 70%); overflow: hidden; }
.appinnen { display: grid; grid-template-columns: 1.5fr auto; gap: 20px;
            padding: 30px 32px; align-items: center; font-family: 'Inter', sans-serif; }
.appblock h2 { font-family: 'Inter', sans-serif; font-size: 22px; line-height: 1.2;
               margin-top: 8px; color: #F7F1E8; }
.appblock p { color: #B9A88F; margin-top: 10px; font-size: 14.5px; max-width: 54ch; }
.appform { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.appform input { flex: 1 1 220px; background: #14090B; border: 1px solid #4A2F1B;
                 border-radius: 10px; padding: 12px 15px; color: #F7F1E8; font-size: 14.5px; }
.appform input:focus { outline: none; border-color: #EFB54B; }
.cta { display: inline-block; background: #B3452E; color: #FFF6EA; border: 0;
       font: 800 14.5px/1 'Inter', sans-serif; padding: 13px 24px; border-radius: 10px;
       cursor: pointer; }
.appschau.klein { position: relative; width: 210px; height: 300px; }
/* height:auto ist Pflicht, nicht Kosmetik: die Kacheln tragen width/height im
   HTML gegen den Layoutsprung, und dieses height-Attribut wirkt als
   Darstellungshinweis auf die CSS-Hoehe. Dieses Stylesheet hat keinen
   img{height:auto}-Reset wie die uebrigen, ohne die Zeile werden die Kacheln
   1120px hoch und laufen gedreht aus dem Kasten. */
.appschau.klein .tel { position: absolute; width: 140px; height: auto; border-radius: 14px;
                       border: 1px solid #4A2F1B; box-shadow: 0 30px 55px -28px #000; }
.appschau.klein .t1 { left: 0; top: 16px; transform: rotate(-6deg); }
.appschau.klein .t2 { left: 72px; top: 0; transform: rotate(5deg); z-index: 2; }

.fuss { border-top: 1px solid #2A1B14; margin-top: 70px; background: #0C0507;
        font-family: 'Inter', sans-serif; }
.fussinnen { max-width: 1140px; margin: 0 auto; padding: 48px 24px 38px; }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.fk { font: 700 11.5px/1 'JetBrains Mono', monospace; letter-spacing: 2px;
      color: #EFB54B; margin-bottom: 13px; }
.spalten a { display: block; color: #B9A88F; font-size: 14px; padding: 4px 0; }
.spalten a:hover { color: #EFB54B; }
.soz { display: flex; gap: 15px; color: #B9A88F; }
.sozsatz { color: #8F7F6C; font-size: 13px; margin-top: 13px; max-width: 34ch; }
.seosatz { color: #6E5F4E; font-size: 12.5px; margin-top: 34px; max-width: 90ch; line-height: 1.6; }
.rechtszeile { margin-top: 16px; font-size: 12.5px; color: #6E5F4E; }
.rechtszeile a { color: #8F7F6C; }
@media (max-width: 700px) {
  .wnav .wlinks { gap: 12px; font-size: 12.5px; }
  .appinnen { grid-template-columns: 1fr; }
  .appschau.klein { display: none; }
}


/* v9: Share und Einordnung in je EINER Zeile */
.leiste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.teilen { flex-wrap: nowrap; }
.tb { padding: 6px 11px; font-size: 11.5px; gap: 5px; flex: none; }
.tb svg { width: 14px; height: 14px; }
.register { margin: 26px 0 0; padding: 0; display: flex; flex-wrap: nowrap;
            gap: 6px; overflow: visible; }
.register div { flex: 1 1 0; min-width: 0; justify-content: center;
                padding: 7px 6px; gap: 6px; }
.register .k { font-size: 8.5px; letter-spacing: .8px; white-space: nowrap; }
.register .w { font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) {
  .register { flex-wrap: wrap; }
  .register div { flex: 1 1 42%; }
}
@media (max-width: 640px) { .leiste { flex-direction: row; align-items: center; } }

/* v9: App-Box, Typo explizit + Fritzi */
.appblock, .appblock * { font-family: 'Inter', sans-serif; }
.appblock .kicker { font-family: 'JetBrains Mono', monospace; }
.appblock h2 { font-weight: 800; }
.appschau .fritzifigur { position: absolute; left: -46px; bottom: -8px; height: 150px;
                         width: auto; transform: rotate(-3deg); z-index: 3;
                         filter: drop-shadow(0 14px 20px rgba(0,0,0,.6)); }
@media (max-width: 700px) { .appschau .fritzifigur { display: none; } }

/* v10: Domain-Navigation exakt */
.nav { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 18px;
       padding: 10px 22px; background: rgba(12,5,7,.88); backdrop-filter: blur(9px);
       border-bottom: 1px solid #2A1B14; font-family: 'Inter', sans-serif; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: #F7F1E8; }
.logo .zeichen { width: auto; height: 30px; flex: none; }
.logo .wort { display: inline-flex; flex-direction: column; align-items: flex-start;
              font-weight: 800; font-size: 17px; letter-spacing: -.045em; line-height: 1; }
/* "fritzis" steht klein ueber der Wortmarke, nicht davor: so bleibt die
   Kopfleiste genau so breit wie vorher und bricht nicht um. */
.logo .wort b { font-weight: 700; font-size: .5em; letter-spacing: .06em; line-height: 1;
                color: #C3AEA0; margin-bottom: .22em; }
.logo .wort i { font-style: normal; color: #EFB54B; }
/* Ab 1160 px hat die Kopfleiste Platz, dann steht der Name in einer Zeile.
   Darunter wird die Leiste eng, dort bleibt er gestapelt. Kein gap, sonst
   trennt es auch "wichtel" von "kamera": beide sind eigene Flex-Kinder. */
@media (min-width: 1160px) {
  .logo .wort { flex-direction: row; align-items: baseline; white-space: nowrap; }
  .logo .wort b { font-size: .62em; letter-spacing: .04em; margin: 0 .42em 0 0; }
}
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav .pfad { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px;
             border-radius: 999px; font-size: 14px; color: #B9A88F; }
.nav a.pfad:hover { color: #F7F1E8; }
.nav .pfad.hier { color: #EFB54B; font-weight: 700; }
.nav .pfad.bald { color: #6E5F4E; cursor: default; }
.nav .pfad.bald i { font-style: normal; font-size: 10px; letter-spacing: 1px;
                    text-transform: uppercase; color: #8F7F6C; border: 1px solid #3A2418;
                    border-radius: 999px; padding: 2px 6px; }
.nav .ruf { margin-left: 6px; padding: 9px 16px; border-radius: 999px; flex: none;
            border: 1px solid rgba(239,181,75,.55); color: #EFB54B; font-weight: 800;
            font-size: 13.5px; white-space: nowrap; }
@media (max-width: 900px) {
  .nav .pfad.bald { display: none; }
  .nav .pfad { font-size: 12.5px; padding: 7px 9px; }
  .nav .ruf { font-size: 12.5px; padding: 8px 12px; }
  .nav .logo .wort { display: none; }
}

/* v11: bebilderte Anleitungen */
ol.schritte { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: s; }
ol.schritte li { position: relative; margin-top: 26px; padding-left: 54px; counter-increment: s; }
ol.schritte li::before { content: counter(s); position: absolute; left: 0; top: 0;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: #241618; border: 1px solid #6E5030; color: #EFB54B;
  font: 800 16px/1 'Inter', sans-serif; }
ol.schritte img { width: 100%; border-radius: 12px; border: 1px solid #3A2418;
  margin-top: 12px; display: block; }
.heldbild-fein { font-size: 12px; color: #6E5F4E; margin-top: 6px; font-family: 'Inter', sans-serif; }

/* v12: mobile Navigation mit Klappmenue */
.klapp { display: none; width: 38px; height: 38px; border: 1px solid #3A2418;
  border-radius: 11px; background: none; cursor: pointer; padding: 0;
  position: relative; flex: none; }
.klapp span, .klapp span::before, .klapp span::after { position: absolute; left: 9px;
  width: 20px; height: 2px; border-radius: 2px; background: #B9A88F; content: "";
  transition: transform .25s, opacity .2s; }
.klapp span { top: 18px; }
.klapp span::before { top: -6px; left: 0; }
.klapp span::after { top: 6px; left: 0; }
.nav.offen .klapp span { background: transparent; }
.nav.offen .klapp span::before { transform: translateY(6px) rotate(45deg); }
.nav.offen .klapp span::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 900px) {
  .nav { flex-wrap: wrap; gap: 12px; }
  .nav ul { display: none; width: 100%; flex-direction: column; gap: 0;
    margin: 8px 0 2px; border-top: 1px solid #2A1B14; order: 4; }
  .nav.offen ul { display: flex; }
  .nav ul li { width: 100%; border-bottom: 1px solid rgba(42,27,20,.7); }
  .nav .pfad { display: block; padding: 13px 2px; font-size: 15.5px; }
  .klapp { display: block; order: 3; }
  .nav .ruf { margin-left: auto; order: 2; }
}

/* v12: die Leiste stapelt auf schmalen Geraeten, nichts quetscht */
@media (max-width: 640px) {
  .leiste { flex-direction: column; align-items: flex-start; gap: 10px;
    overflow: visible; }
  .teilen { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .nav .pfad.bald { display: inline-flex; }
}

/* v13: Teilen mobil nur als Icons, die Dienste erkennt man an der Farbe */
@media (max-width: 640px) {
  .tb .tt { display: none; }
  .tb { padding: 7px; }
  .tb svg { width: 13px; height: 13px; }
  .teilen { gap: 6px; }
}