dogfather-universe/workspace/assets/css/unsere-seiten.css

/* =====================================================================
   UNSERE SEITEN (19.09.2026)

   Zwei Karten, die aus dem Treff hinausführen: die Website und
   VanVans Shop.

   WARUM SIE ANDERS AUSSEHEN ALS DIE BRETTER-KACHELN: Sie tun etwas
   anderes. Eine Brett-Kachel öffnet eine Liste im selben Fenster; diese
   hier verlassen den Treff. Dass man das vorher sieht, ist kein
   Schmuck, sondern die Ansage — deshalb der eigene Zuschnitt, der
   deutlich sichtbare Adressname und der Pfeil nach außen.

   AUGENSCHONEND, WIE ÜBERALL IM HAUS: Die Farbe liegt im Verlauf und
   im Rand, nie in einer leuchtenden Fläche hinter Text. Bewegung gibt
   es nur beim Darüberfahren, und `prefers-reduced-motion` schaltet sie
   ganz ab.
   ===================================================================== */

.seiten-gitter {
  display: grid;
  gap: 1.1rem;
  /* EINE REGEL STATT EINER ZAHL. Zwei Spalten, sobald zweimal 21rem
     plus Abstand hineinpassen — und sonst eine. Kommt eine dritte
     Karte dazu, ordnet sich das von selbst, ohne dass jemand eine
     Schwelle nachziehen muss. */
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  margin: 1.4rem 0 0;
}

.aussen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.35rem 1.35rem 1.2rem;
  border-radius: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--aussen-ton) 42%, transparent);
  /* DREI LAGEN STATT ZWEI (19.09.2026). Filipe: "auch der hintegrrund
     der kacheln, ich will es viel spezieller".

     Vorher lag der Ton mit 7 % auf der Flaeche -- auf einem dunklen
     Bildschirm sieht man davon fast nichts, die Kachel wirkte grau.
     Jetzt: ein heller Bogen oben links (woher das Licht kommt), ein
     zweiter, schwacher unten rechts (damit die Flaeche nicht flach
     kippt) und ein Grundverlauf, der den Ton wirklich traegt.

     Nach oben begrenzt bleibt es trotzdem: Der hellste Punkt liegt bei
     28 %, und Text steht nie darauf -- er hat seine eigene Lage. */
  background:
    radial-gradient(120% 95% at 6% -5%,
      color-mix(in srgb, var(--aussen-ton) 28%, transparent), transparent 58%),
    radial-gradient(90% 80% at 105% 110%,
      color-mix(in srgb, var(--aussen-ton) 16%, transparent), transparent 62%),
    linear-gradient(158deg,
      color-mix(in srgb, var(--aussen-ton) 14%, #0c1420),
      #090f1a 72%);
  box-shadow:
    0 18px 38px -20px color-mix(in srgb, var(--aussen-ton) 85%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--aussen-ton) 22%, transparent);
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* Die Töne der beiden Karten. Sie stehen hier und nicht im HTML,
   damit eine dritte Karte eine Zeile braucht und nicht zehn.

   BABYBLAU UND LILA seit dem 19.09.2026 (Filipe: „die linke kachel soll
   babyblau sein und rechte lila").

   Babyblau ist im Haus schon vergeben — es ist der Ton der Sekunde auf
   der Uhr (#7ec8f2), und dieselbe Farbe zweimal anders zu treffen wäre
   schlampig. Also derselbe Wert.

   Das Lila ist dasselbe, in das an diesem Tag die Stunden der Uhr
   umgerechnet wurden (OKLCH-Farbton 303°). Beide Kacheln sprechen
   damit die Sprache, die die Startseite ohnehin spricht.

   `--logo` nennt die Maske. Sie steht an der Karte und nicht am
   Logofeld, damit eine dritte Karte nur diese zwei Zeilen braucht. */
.aussen--dogi {
  --aussen-ton: #7ec8f2;
  --logo: url("/assets/img/marke/maske-dogi.png");
}
.aussen--shop {
  --aussen-ton: #b284ec;
  --logo: url("/assets/img/marke/maske-vanvan.png");
}

/* ---- DIE SCHWEBENDEN LOGOS ------------------------------------------

   Vier Stück je Karte, verschieden groß, verschieden schnell, mit
   verschiedener Verzögerung. Gleich wäre Tapete.

   SIE LIEGEN UNTER ALLEM (`z-index: 0` im eigenen Kontext, Text
   darüber). Die Deckkraft liegt zwischen 10 und 16 Prozent — der erste
   Versuch mit 5 bis 9 war auf dem Bildschirmfoto praktisch unsichtbar,
   und „soll mega aussehen" heißt nicht „soll man erahnen können".

   Nach oben ist trotzdem eine Grenze: Ab etwa 25 Prozent fängt das
   Logo an, mit der Überschrift zu konkurrieren, und der Text wird
   mühsam. Was hier entstehen soll, ist Tiefe, kein zweiter Titel.

   `mask-image` statt `background-image`: Die PNG-Dateien tragen nur
   Alpha. Die Farbe ist `currentColor` der Karte — dadurch ist das
   Logo automatisch babyblau bzw. lila, ohne zweite Datei. */
.logo-feld {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.logo-feld__stueck {
  position: absolute;
  background-color: var(--aussen-ton);
  -webkit-mask-image: var(--logo);
          mask-image: var(--logo);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  will-change: transform;
}

/* Die vier Lagen. Die Zahlen sind gesetzt, nicht gerechnet — ein
   Zufallsgenerator würde bei jedem Laden anders aussehen, und dann
   fällt niemandem mehr auf, wenn eines daneben liegt. */
.logo-feld__stueck[data-n="1"] {
  width: 15rem; height: 15rem; right: -4.5rem; top: -3.5rem;
  opacity: .16;
  animation: logo-schweben-a 26s ease-in-out infinite;
}
.logo-feld__stueck[data-n="2"] {
  width: 8rem; height: 8rem; right: 4.5rem; bottom: -1.5rem;
  opacity: .13;
  animation: logo-schweben-b 34s ease-in-out infinite;
  animation-delay: -6s;
}
.logo-feld__stueck[data-n="3"] {
  width: 5rem; height: 5rem; right: 12rem; top: 35%;
  opacity: .105;
  animation: logo-schweben-a 41s ease-in-out infinite;
  animation-delay: -15s;
}
.logo-feld__stueck[data-n="4"] {
  width: 3.4rem; height: 3.4rem; right: 2rem; top: 18%;
  opacity: .14;
  animation: logo-schweben-b 29s ease-in-out infinite;
  animation-delay: -21s;
}

/* ZWEI BAHNEN, NICHT EINE. Mit nur einer bewegten sich alle vier
   gleich — das sieht aus, als wackle die ganze Kachel. Die zweite
   läuft andersherum, dadurch entsteht der Eindruck, dass sie
   unabhängig voneinander treiben.

   SEHR KLEINE WEGE (unter 14 px) und sehr lange Dauern (26–41 s). Was
   man beim Hinsehen als Bewegung erkennt, lenkt beim Lesen ab. Das hier
   merkt man erst, wenn man zweimal hinschaut — und genau das ist
   gemeint mit „ganz leicht bewegen". */
@keyframes logo-schweben-a {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  33%  { transform: translate3d(-9px, -11px, 0) rotate(2.5deg); }
  66%  { transform: translate3d(7px, -5px, 0) rotate(-1.8deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes logo-schweben-b {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  40%  { transform: translate3d(8px, 9px, 0) rotate(-3deg); }
  75%  { transform: translate3d(-6px, 4px, 0) rotate(1.5deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

/* Wer weniger Bewegung will, bekommt die Logos trotzdem — nur still.
   Sie ganz zu entfernen wäre falsch: Sie sind Gestaltung, nicht
   Animation. */
@media (prefers-reduced-motion: reduce) {
  .logo-feld__stueck { animation: none; }
}

/* Der stille Schein im Hintergrund. Liegt UNTER allem (`z-index: -1`)
   und ist so schwach, dass er bei Tageslicht kaum auffällt — er soll
   Tiefe geben, nicht leuchten. */
.aussen__schein {
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 78%;
  z-index: -1;
  background: radial-gradient(60% 60% at 50% 50%,
    color-mix(in srgb, var(--aussen-ton) 34%, transparent), transparent 70%);
  filter: blur(30px);
  opacity: .7;
  pointer-events: none;
}

.aussen:hover,
.aussen:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--aussen-ton) 52%, transparent);
  box-shadow: 0 22px 40px -20px color-mix(in srgb, var(--aussen-ton) 85%, transparent);
}

/* ALLES, WAS MAN LIEST, LIEGT ÜBER DEN LOGOS. Ohne diese Zeile wandert
   der Text unter das Logofeld, sobald es eine eigene Ebene bekommt —
   die Karte sähe dann leer aus, und man sucht den Fehler beim Text. */
.aussen > *:not(.logo-feld):not(.aussen__schein) {
  position: relative;
  z-index: 1;
}

.aussen__kopf {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.aussen__zeichen {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: .8rem;
  border: 1px solid color-mix(in srgb, var(--aussen-ton) 38%, transparent);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--aussen-ton) 20%, transparent), transparent 74%);
}
.aussen__zeichen svg {
  width: 1.65rem;
  height: 1.65rem;
  fill: none;
  stroke: color-mix(in srgb, var(--aussen-ton) 78%, #dceaf8);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aussen__marke {
  margin: 0 0 .1rem;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--aussen-ton) 55%, #9fb4c9);
}

.aussen__titel {
  margin: 0;
  font-size: 1.32rem;
  line-height: 1.2;
  /* Text bleibt hell und ruhig. Die Farbe steckt im Rahmen, nicht in
     der Schrift — farbige Überschriften auf dunklem Grund sind der
     schnellste Weg zu müden Augen. */
  color: #e9f2fb;
}

.aussen__satz {
  margin: 0;
  color: var(--text-leise, #93a7bd);
  font-size: .95rem;
  line-height: 1.5;
}

/* Was es auf der Seite gibt. Ruhig gesetzt: Der Punkt links ist ein
   kleiner Strich in der Kartenfarbe, kein Aufzählungszeichen — vier
   bunte Punkte untereinander wären mehr Unruhe als Information. */
.aussen__liste {
  margin: .1rem 0 .2rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .42rem;
}
.aussen__liste li {
  position: relative;
  padding-left: 1.05rem;
  font-size: .89rem;
  line-height: 1.45;
  color: var(--text-leise, #93a7bd);
}
.aussen__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .5rem;
  height: 1px;
  background: color-mix(in srgb, var(--aussen-ton) 60%, transparent);
}

.aussen__weg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
  margin: auto 0 0;
  padding-top: .35rem;
}

.aussen__adresse {
  font-size: .82rem;
  color: color-mix(in srgb, var(--aussen-ton) 45%, #8ea3b9);
  word-break: break-all;
}

.aussen__knopf {
  flex: 0 0 auto;
  display: inline-block;
  padding: .55rem 1rem;
  border-radius: .6rem;
  border: 1px solid color-mix(in srgb, var(--aussen-ton) 45%, transparent);
  background: color-mix(in srgb, var(--aussen-ton) 14%, transparent);
  color: #eaf3fc;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  /* 44 px hoch, damit ein Daumen ihn trifft. */
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  transition: background-color .18s ease, border-color .18s ease;
}
.aussen__knopf:hover,
.aussen__knopf:focus-visible {
  background: color-mix(in srgb, var(--aussen-ton) 26%, transparent);
  border-color: color-mix(in srgb, var(--aussen-ton) 68%, transparent);
}

/* ---- DER GUTSCHEIN ---------------------------------------------------

   Sieht aus wie ein abgerissener Abschnitt, weil genau das gemeint
   ist: etwas zum Mitnehmen. Die gestrichelte Linie ist das einzige
   Stilmittel — sie sagt "hier abtrennen", ohne ein Wort dafür zu
   brauchen. */
.gutschein {
  margin: .2rem 0 .1rem;
  padding: .9rem 1rem 1rem;
  border-radius: .8rem;
  border: 1px dashed color-mix(in srgb, var(--aussen-ton) 42%, transparent);
  background: color-mix(in srgb, var(--aussen-ton) 8%, transparent);
}

.gutschein__zeile {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin: 0 0 .6rem;
}

.gutschein__prozent {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #f2f7fc;
}

.gutschein__wofuer {
  font-size: .88rem;
  color: var(--text-leise, #93a7bd);
}

.gutschein__code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  width: 100%;
  min-height: 3rem;
  padding: .6rem .9rem;
  border-radius: .6rem;
  border: 1px solid color-mix(in srgb, var(--aussen-ton) 50%, transparent);
  background: rgba(255, 255, 255, .04);
  color: #f2f7fc;
  cursor: pointer;
  text-align: left;
  transition: background-color .18s ease, border-color .18s ease;
}
.gutschein__code:hover,
.gutschein__code:focus-visible {
  background: rgba(255, 255, 255, .08);
  border-color: color-mix(in srgb, var(--aussen-ton) 72%, transparent);
}

.gutschein__wort {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.gutschein__hinweis {
  font-size: .78rem;
  color: var(--text-leise, #93a7bd);
  text-align: right;
}
/* Nach dem Kopieren steht dort die Bestätigung — in Grün, aber in
   einem gedeckten, das auf Dunkel nicht sticht. */
.gutschein__code[data-kopiert="ja"] .gutschein__hinweis { color: #74c79a; }

.gutschein__klein {
  margin: .6rem 0 0;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text-leise, #93a7bd);
}

.seiten-fuss {
  margin: 1.4rem 0 0;
  font-size: .85rem;
  color: var(--text-leise, #93a7bd);
}

/* Wer Bewegung ausgeschaltet hat, bekommt keine. Die Karte bleibt
   trotzdem erkennbar bedienbar — über Rand und Schatten. */
@media (prefers-reduced-motion: reduce) {
  .aussen,
  .aussen__knopf,
  .gutschein__code { transition: none; }
  .aussen:hover,
  .aussen:focus-within { transform: none; }
}