/* Home page of xharig.com: the parts only this page has. Colours, type,
   buttons, header, menu and footer come from basis.css, which every page of
   every Xharig site loads first. */

/* The name alone is the mark here, so it stays visible on phones too. */
.marke span{display:inline !important}

/* ---------- Headline ---------- */
.start{padding:64px 0 40px}
.start h1{margin:0}
.start h1 .name{display:block;font-size:clamp(52px,8vw,84px);line-height:1;font-weight:700;letter-spacing:-.02em}
.start h1 .zeile{display:block;margin-top:14px;font-size:clamp(23px,2.6vw,30px);line-height:1.25;font-weight:400;color:var(--leise)}

/* ---------- The two tools ----------
   A picture of the tool behind, text and button in front. The picture has
   its own rounding, so the accent corners of the frame stay visible. */
.kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding-bottom:88px}
.kachel{display:flex;flex-direction:column;min-height:340px;color:var(--text);isolation:isolate;background:var(--flaeche)}
.kachel:hover{text-decoration:none;border-color:var(--neon)}
.kachel .hintergrund{position:absolute;inset:0;border-radius:calc(var(--rund) - 1px);background-size:cover;background-position:center;opacity:.22;z-index:-1}
.kachel .hintergrund.versekit{background-image:url(versekit-hintergrund.webp)}
.kachel .hintergrund.versespotter{background-image:url(versespotter-hintergrund.webp)}
.kachel:hover .hintergrund{opacity:.32}
@media (prefers-reduced-motion:no-preference){.kachel .hintergrund{transition:opacity .25s}}
.kachel .inhalt{margin-top:auto;padding:26px;border-radius:0 0 calc(var(--rund) - 1px) calc(var(--rund) - 1px);
  background:linear-gradient(rgba(16,20,28,0),rgba(16,20,28,.94) 40%)}
.kachel .zeile{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.kachel img{width:64px;height:64px;flex:none}
.kachel h2{font-size:28px;margin:0}
.kachel p{margin:0 0 18px;color:var(--leise);min-height:3.2em}
.kachel:hover .knopf{border-color:var(--neon);color:var(--neon);background:var(--neon-dunkel)}
.pfeil{width:1.1em;height:1.1em;background:currentColor;
  -webkit-mask:url(arrow-right.svg) center/contain no-repeat;mask:url(arrow-right.svg) center/contain no-repeat}

/* ---------- Who is behind this ---------- */
.ueber-spalten{display:grid;grid-template-columns:3fr 2fr;gap:48px;align-items:start}
.ueber-text > p{margin:0 0 14px;max-width:40em}
.einladen{margin-top:26px;padding:24px 26px;background:var(--flaeche)}
.einladen p{margin:0 0 14px;color:var(--leise)}
.einladen code{white-space:nowrap;color:var(--neon);font-size:.95em}
.ref-meldung{margin:12px 0 0 !important;min-height:1.5em;font-size:15px;color:var(--neon) !important;overflow-wrap:anywhere}
.grundsaetze{list-style:none;margin:0;padding:0}
.grundsaetze li{padding:10px 0 10px 16px;border-left:2px solid var(--neon);margin-bottom:12px;color:var(--leise)}
.profile{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:36px 0 0;padding:0}
.profile .knopf{font-size:15px;padding:9px 18px}
.profile img.ic{width:auto;height:1.15em}

@media (max-width:860px){
  .kacheln{grid-template-columns:minmax(0,1fr)}
  .ueber-spalten{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media (max-width:640px){
  .start{padding:40px 0 28px}
  .kacheln{padding-bottom:64px;gap:20px}
  .kachel{min-height:300px}
  .kachel .inhalt{padding:22px}
  .einladen{padding:20px}
  .profile .knopf{min-height:44px}
}